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

> A step-by-step guide for pasting Tailwind v4 @theme CSS variables from a shadcn theme generator into your globals.css. Covers the new CSS-first theming workflow, common mistakes, and how to fix them fast.

Published: 2026-03-04 · Author: Matt Wierzbicki · Canonical: https://www.shadcndesign.com/blog/how-to-paste-tailwind-v4-theme-css-variables-from-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 <Link href="/theme-generator">shadcn Theme Generator</Link> 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. <Link href="/theme-generator">Generate the theme CSS</Link>.

### 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 <Link href="/theme-generator">Theme Generator</Link> 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 <Link href="/themes">shadcn theme collection</Link>, pick a preset, then tweak it so it still looks like you.