Tailwind CSS v4 primer

All templates are styled with Tailwind CSS v4. You don't need to know Tailwind to change text or images, but a little background helps when you change the design.

How it works#

Tailwind generates CSS for the utility classes it finds in your files (flex, px-6, text-brand-600...). Version 4 is configured in CSS, not in a JavaScript config file:

@import "tailwindcss";

@theme {
  --color-brand-600: #4338ca;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
}

• @import "tailwindcss" brings in Tailwind.
• @theme defines design tokens. Each --color-*, --font-* or --radius-* variable becomes utilities (bg-brand-600, font-display, rounded-card) and a CSS variable you can use anywhere.
• Templates also add a few component classes (buttons, cards, the back-to-top button) with @layer components.

Where the source lives#

Rebuilding the CSS#

HTML templates ship with compiled CSS, so they work without any tools. Rebuild when you change src/input.css or use a Tailwind class that isn't in the template yet. With Node.js 24 installed:

npm install        # once
npm run build      # writes assets/css/style.css
npm run watch      # or rebuild automatically while you edit

If a class you added has no effect, the CSS hasn't been rebuilt yet. Tailwind only scans the files in the template folder, so classes built from strings in JavaScript must appear in full somewhere (write "bg-red-600", not "bg-" + colour + "-600").

Dark mode#

Templates with dark mode define a dark variant that follows a class on <html>, so dark:bg-zinc-900 applies when the visitor turns dark mode on. The toggle in assets/js/main.js (HTML) or the theme component (Next.js) sets that class and remembers the choice.

Learn more#

• Tailwind CSS documentation: every utility class.
• Theme variables: how @theme works.