Installing Tailwind CSS
Tags: 100daystooffload
Published: 2020-11-02 20:28:52

Recently I've been looking at the [Tailwind](https://tailwindcss.com) CSS framework (both with and without [Svelte](https://svelte.dev)). With the current versions of the various utilities required, I struggled a bit to get everything compiling the way it should. Once I worked this out, I put this together as a reminder.

## Getting started

The Tailwind website has a [video tutorial course](https://tailwindcss.com/course) that I started with and it's definitely worth watching, with a very small adjustment required.

First, initialise an empty NPM project:

```
❯ npm init -y
```

The next step is to install the required components:

```
❯ npm install tailwindcss postcss-cli autoprefixer
```

Note that there is an entirely different package called `tailwind`, so be sure to install `tailwindcss`.

Next, Tailwind can be initialised, which creates `tailwind.config.js`.

```
❯ npx tailwind init
```

The video goes on to set up a new file called `postcss.config.js` to configure the compilation of your CSS:

```js
module.exports = {
    plugins: [
        require("tailwindcss"),
        require("autoprefixer"),
    ]
}
```

Finally, you get around to creating a basic CSS file that imports the Tailwind directives and modifying `package.json` to include this build script:

```json
"scripts": {
    "build": "postcss css/tailwind.css -o public/build/tailwind.css"
}
```
## Compiling your CSS

Running `npm build` should now produce your compiled CSS. But when I tried this, it didn't work:

```
❯ npm run build

> tailwind-example@1.0.0 build /home/user/workspace/tailwind-example> postcss css/tailwind.css -o public/build/tailwind.css
Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/home/user/workspace/tailwind-example/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/home/user/workspace/tailwind-example/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/home/user/workspace/tailwind-example/node_modules/postcss/lib/postcss.js:55:10)
    at /home/user/workspace/tailwind-example/node_modules/postcss-cli/index.js:218:14
    at async Promise.all (index 0)
npm ERR! code ELIFECYCLEnpm ERR! errno 1
npm ERR! tailwind-example@1.0.0 build: `postcss css/tailwind.css -o public/build/tailwind.css`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the tailwind-example@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2020-11-02T20_03_37_814Z-debug.log
```

It turns out that the solution is simple but it was hard for me to find. All that is missing is the installation of `postcss` itself (and not only `postcss-cli`).

```
❯ npm install postcss
```

Everything then works as intended:

```
❯ npm run build

> tailwind-example@1.0.0 build /home/user/workspace/tailwind-example
> postcss css/tailwind.css -o public/build/tailwind.css
```

_I'm publishing this as part of 100 Days To Offload. You can join in yourself by visiting [https://100daystooffload.com.](https://100daystooffload.com)_