DEV Community

Cover image for Installing Tailwind CSS
Paul Strickland
Paul Strickland

Posted on • Originally published at pestrickland.co.uk

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
Enter fullscreen mode Exit fullscreen mode

The next step is to install the required components:

❯ npm install tailwindcss postcss-cli autoprefixer
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"),
    ]
}
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

I'm publishing this as part of 100 Days To Offload. You can join in yourself by visiting https://100daystooffload.com.

Top comments (0)