How to setup Tailwind CSS

I recently set out to move my blog CSS to Tailwind.

Tailwind is an interesting framework because instead of providing a set of widgets like Bootstrap or others, it provides utilities.

I find it resonates a lot with how I work with HTML.

I introduced how I use Tailwind with Vue in a previous post, but without a build tool in place already, it can be hard to get the correct setup right, and I decided to write this blog post even just for me to remember later on 🙃

In this post I explain how to use Tailwind with any kind of project. The steps below target Tailwind CSS 4 (4.3 as of September 2026). If you read an older version of this post, the tailwind.config.js file, npx tailwind init and the separate PurgeCSS step are all gone.

Prefer Vite when you can

If your project already uses Vite, this is the path I recommend.

Install Tailwind

npm init -y
npm install tailwindcss @tailwindcss/vite

Add the Vite plugin

In vite.config.js (or .ts):

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

Import Tailwind in your CSS

Create a CSS file (for example src/style.css) and put this in it:

@import "tailwindcss";

Include that CSS from your HTML or app entry, then run your usual Vite command:

npm run dev

That’s the whole setup. Tailwind 4 scans your templates for class names on its own, so the generated CSS only contains the utilities you actually use.

Alternate: PostCSS

No Vite? Use the Tailwind PostCSS plugin instead.

npm install tailwindcss @tailwindcss/postcss

Create or update postcss.config.mjs (the .mjs extension lets you use export default without setting "type": "module" in package.json):

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

Your CSS file still starts with:

@import "tailwindcss";

Then build with your PostCSS pipeline. Example package.json script:

"scripts": {
  "build:css": "postcss src/style.css -o static/dist/tailwind.css"
}

Install the CLI helper if you need it: npm install -D postcss postcss-cli.

Third option: Tailwind CLI

For a plain folder with no Vite and no PostCSS config, use the standalone CLI:

npm install tailwindcss @tailwindcss/cli

npx @tailwindcss/cli -i ./src/style.css -o ./static/dist/tailwind.css --watch

Same CSS entry:

@import "tailwindcss";

What about PurgeCSS?

The first version of this post (Tailwind 0.x and 1.x) had you wire @fullhuman/postcss-purgecss and cssnano into PostCSS, because Tailwind shipped every utility and left you a huge CSS file to trim.

You don’t need any of that now. Tailwind 2 and 3 already purged unused classes through the purge (later content) option in tailwind.config.js, and Tailwind 4 scans your project files automatically, with no config file at all. If you still maintain a Tailwind 1 project, the old PurgeCSS config can stay until you migrate.

Automatically regenerate the CSS upon file changes

With Vite, npm run dev already rebuilds when files change.

With the CLI, pass --watch as in the example above.

With a custom PostCSS script, you can still use a file watcher if you want. Install watch:

npm install watch

"scripts": {
  "build:css": "postcss src/style.css -o static/dist/tailwind.css",
  "watch": "watch 'npm run build:css' ./layouts"
}

Then run npm run watch.

Start using utilities

Once the CSS is in the page, write Tailwind classes in your HTML:

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

If the heading comes out big, bold and underlined, Tailwind is working.

Want me to talk about your product? You can sponsor this site.