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, the latest stable release when I refreshed this guide.

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 is the whole setup. Tailwind 4 scans your templates for class names on its own. You do not need a separate PurgeCSS package for a new project.

Alternate: PostCSS

No Vite? Use the Tailwind PostCSS plugin instead.

npm install tailwindcss @tailwindcss/postcss

Create or update postcss.config.js:

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?

Older Tailwind setups shipped a huge CSS file and asked you to wire @fullhuman/postcss-purgecss (plus often cssnano) to strip unused classes.

Tailwind 4 changed that. Content detection is built in. For a fresh install, skip the separate PurgeCSS step.

If you still maintain a Tailwind 2/3 PostCSS project, that older PurgeCSS config can stay until you migrate. For anything new, use Vite or @tailwindcss/postcss and let Tailwind trim unused styles itself.

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>

That is enough to get Tailwind 4 running in almost any project.

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