visitors

Install Tailwind CSS

Every component is styled with Tailwind CSS v4 utility classes. There is no separate stylesheet to import.

Setup

1.Install the packages

$ npm install tailwindcss @tailwindcss/postcss postcss

2.Add the PostCSS plugin

Create this file at the project root.

postcss.config.mjs

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

3.Import Tailwind

One line at the top of your global stylesheet. Tailwind v4 needs no tailwind.config.js.

app/globals.css

@import "tailwindcss";

4.Load the stylesheet

Import it once in the root layout so every route gets it.

app/layout.tsx

import "./globals.css"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Theme tokens

Components use shadcn colour tokens such as bg-muted and text-foreground. The shadcn init step on the CLI page writes those into globals.css for you.