How do I install and set up Tailwind CSS 4 with Vite or PostCSS? There is no tailwind.config.js anymore.

Tailwind 4 changes

There is no required tailwind.config.js, no content array (files are detected automatically) and no @tailwind base/components/utilities directives. You import Tailwind from CSS.

Vite (recommended path)

npm install tailwindcss @tailwindcss/vite

vite.config.ts:

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

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

src/index.css:

@import "tailwindcss";

Import that CSS file in your entry (main.ts), then use classes in your templates.

Next.js and other PostCSS setups

npm install tailwindcss @tailwindcss/postcss postcss

postcss.config.mjs:

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

Then in app/globals.css: @import "tailwindcss";. Remove autoprefixer and postcss-import, v4 handles vendor prefixes and imports itself.

Customising in CSS

@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --color-brand-500: oklch(0.62 0.19 260);
}

If you must keep a JS config

Load it explicitly: @config "../../tailwind.config.js"; (it is not auto-detected anymore).

Pitfalls

• Tailwind 4 targets modern browsers (Safari 16.4+, Chrome 111+, Firefox 128+). If you need older ones, stay on v3.4.
• Sass/Less preprocessors are not supported together with v4; use plain CSS and native nesting.
• Classes not applied? Check the CSS file is imported and that the dev server was restarted after installing the plugin.