How to paste Tailwind v4 @theme CSS variables from a shadcn Theme Generator

If you're using shadcn/ui with Tailwind v4, you will spend time in globals.css. That's normal.

Tailwind v4 pushes more theme work into CSS. You define tokens with @theme, and you keep light/dark values in :root and .dark. It's a clean setup, but easy to break when you paste stuff in the wrong order. The official docs call out that upgrading includes updating your CSS variables, so don't skip this step.

This guide shows the simple way: generate a theme, paste it, and fix the common mistakes fast.

What Tailwind v4 changed

• Your theme tokens live in CSS, not just config files.
• The system uses @theme and @theme inline so Tailwind can "see" your CSS variables.
• You keep the real color values (like OKLCH) in :root and .dark, then reference them in @theme inline for Tailwind utilities.

What your theme generator should output

Use your shadcn Theme Generator to get a block you can paste. It should include:

• :root values (light mode)
• .dark values (dark mode)
• CSS variables for colors
• Radius, fonts, and maybe shadows
• Something that maps to Tailwind's @theme system

If your generator is outputting Tailwind v4-ready CSS variables, it's doing the right thing for this workflow.

Step by step: generate, copy, paste into globals.css

Step 1: run the generator

Pick a Tailwind color family and shade, or your brand hex. Generate the theme CSS.

Step 2: copy the CSS block

You want the full block: :root, .dark, and the variable definitions.

Step 3: paste into globals.css

Where to paste?

• Find the existing theme section in globals.css
• Replace the old :root and .dark blocks with the new ones
• Keep imports and Tailwind directives where they already are (don't move them randomly)

Step 4: keep the Tailwind stuff intact

Make sure you didn't remove or break the Tailwind directives (like @import "tailwindcss"; or the Tailwind base layer setup). Many guides show a pattern where globals.css imports Tailwind and defines theme tokens, then uses @theme inline to expose them.

Step 5: restart dev server if it's acting weird

Tailwind v4 sometimes needs a restart to "see" your new theme tokens.

Common failures

"Everything looks wrong"

• Did you paste your theme block in the right place?
• Did you accidentally comment out or delete @theme inline?
• Did you paste a block twice and override yourself?

"Dark mode doesn't toggle"

• Make sure .dark is actually loaded and toggled by your app (class on html or body).
• Confirm .dark has real values, not empty ones.

"Colors are there but Tailwind utilities don't pick them up"

This often means the @theme inline mapping is wrong, missing, or placed above the variables it references. A common Tailwind v4 pattern is:

1. Define CSS variables in :root / .dark
2. Define @theme inline after, referencing those variables

"My editor shows errors"

• Check missing semicolons
• Check braces
• Check you didn't paste an extra :root { :root { ... } } nested mess

Keep brand consistency across templates

If you have templates, blocks, or shared UI kits, lock in the theme:

• Use the Theme Generator to produce one "source of truth" theme block
• Paste it across the projects that need the same look
• Avoid "tiny tweaks" in random files — they add up fast

Once you've pasted your theme into globals.css, it can be useful to see how other themes are structured and how they "feel" in real UI. That way you can spot what you like, borrow naming patterns, and avoid reinventing the wheel. If you want a fast shortcut for that kind of inspiration, take a look through our shadcn theme collection, pick a preset, then tweak it so it still looks like you.