Install Tailwind CSS

Install the packages

npm install tailwindcss @tailwindcss/postcss

Register the PostCSS plugin

In v4 the PostCSS plugin lives in its own package — pointing the config at bare tailwindcss is the old v3 setup and fails with “trying to use tailwindcss directly as a PostCSS plugin”.

// postcss.config.mjs
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

Import it in your CSS

A single import replaces the old three-line @tailwind base/components/utilities block, and no tailwind.config file is needed to start:

@import "tailwindcss";

Create your CSS file

v4 is CSS-first: variants and theme tokens live in the stylesheet itself. This mirrors the top of Kick UI's own globals.css — import, dark variant, then tokens:

/* app/globals.css */
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --font-mono: "Geist Mono", monospace;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

Start your build process

npm run dev

Start using Tailwind

Drop a utility-first component into app/page.tsx and confirm the styles apply:

export default function Home() {
  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}

What changed from v3

Drop autoprefixer and postcss-import if you are migrating — v4 handles vendor prefixing and imports internally. Theme tokens move into CSS with @theme, which is exactly how Kick UI defines its palette.