Installing Tailwind CSS

Recently I've been looking at the Tailwind CSS framework (both with and without Svelte). 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 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:

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:

"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.