Learn setup process of tailwind using postcss which is the recommended approach while using any build tools like webpack, vite, parcel etc.

There are basically 3 ways to use tailwind css in projects:

Using CDN links (which is better suited for quick prototypes or playing with tailwind).
Using Tailwind CLI (Easy and straight forward approach).
Using as postcss plugin (Preferable if using some build tools).

In this article we would be learning the 3rd way of using tailwind 3 as a postcss plugin.

Basic setup

Create a new directory and initialize a new npm project.

mkdir tailwind3_postcss
cd tailwind3_postcss
npm init -y

This would generate a new file called package.json with content something like this.

{
  "name": "tailwind3_postcss",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Installing required dependencies

We would need atleast tailwind and postcss-cli which can be installed via below commands. Notice the -D flag which tells npm to install them as a dev dependency.

npm i -D tailwindcss postcss-cli

Setting up required files

Tailwind & Postcss looks for file named taiwind.config.js & postcss.config.js by default within the root of our project for its configurations. So lets create the same by running following commands. The -p flag tells tailwindcss that we would be using postcss and want it to generate the required postcss.config.js file as well.

npx tailwindcss init -p

Now that we have the required files in place. Lets create a simple html file where we would be using our tailwind styles. Lets create a new file dist/index.html file having some tailwind utility classes to test.

Currently we dont have the below referenced dist/main.css file but we will generate that soon.

dist/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="/dist/main.css" rel="stylesheet" />
  </head>
  <body>
    <div class="text-lg p-6 text-indigo-600 text-center">I am styled via tailwind css 3</div>
  </body>
</html>

And the last missing piece to be added here is the css file. Lets create a css new file src/main.css and add the required tailwind directives.

src/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Some last minute changes:

Almost there!, now we need to tell tailwind where to look for files using tailwind classes. In our case its dist/index.html

tailwind.config.js

module.exports = {
  content: ["./dist/**/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
};

And finally lets add some custom commands to our package.json. add below scripts under the scripts section.

package.json

"scripts": {
  "build:css": "postcss ./src/main.css -o ./dist/main.css",
  "watch:css": "postcss ./src/main.css -o ./dist/main.css --watch"
}

Testing our code:

Inside terminal Navigate inside the project directory and run

npm run build:css

This would create a new main.css file within the dist directory having all the styles defined in index.html.

You can verify the applied styles by opening html via:

live-server
OR something similar.

Extra Nuggets:

You must be wondering whats the use of other watch:css command we have created above. This command basically looks for any new css utility we have added inside our html and adds them to main.css on the fly. Thanks for the JIT compiler provided by tailwind.

To enhance our experience more we can also use something like npm-run-all to trigger watch:css and any other build command we have for our bundler in parallel.

Something like:

run-p watch:css build:**

Credits:

Tailwind CSS Official Docs