Tailwind CSS Theme Configuration

Configure Tailwind CSS v4 and Shadcn UI themes in your Next.js Prisma 7 SaaS kit application.

Configure your color palette and component styling using Tailwind CSS v4 and Shadcn UI themes - all through CSS variables without modifying components.

The Next.js Prisma 7 SaaS kit uses Tailwind CSS v4 with Shadcn UI for all styling. Theme customization happens entirely through CSS variables defined in the styles/ directory. You can apply pre-built Shadcn UI themes with a single import or define custom colors using the standard variable naming convention. All Shadcn UI components automatically inherit your theme.

The Tailwind CSS theme in this kit is a set of CSS custom properties (variables) that control colors, radii, and spacing across all Shadcn UI components. Changing these variables updates the entire UI.

CSS File Structure

FilePurposeEdit?
globals.cssMain entry point, imports other filesRarely
theme.cssTailwind v4 theme tokensRarely
shadcn-ui.cssShadcn UI CSS variablesRarely
custom.cssYour customizations go hereYes
makerkit.cssKit-specific stylesRarely
markdoc.cssDocumentation content stylesRarely

Applying a Shadcn UI Theme

Copy CSS variables from the Shadcn UI themes page into your custom.css:

Step 1: Choose a Theme

Go to the Shadcn UI Themes page, select a theme, and click "Copy".

Step 2: Paste into custom.css

Edit apps/web/styles/custom.css and paste the copied CSS:

/*
 * custom.css
 * Add your custom styles here
 */
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    /* ... all other variables from the theme */
  }
  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    /* ... dark mode variables */
  }
}

Step 3: Restart the Dev Server

Tailwind CSS v4 may require a restart to pick up CSS changes:

pnpm dev

After restart, verify your theme applied by checking any button or link - they should show your new primary color. If colors don't update, hard refresh with Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows).

Defining Custom Colors

To use your own brand colors, define CSS variables in custom.css:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    /* Add all required variables */
  }
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
  }
}

Colors use HSL format without the hsl() wrapper: hue saturation% lightness%.

Required CSS Variables

Shadcn UI expects these variables to be defined:

VariablePurpose
--backgroundPage background
--foregroundDefault text color
--primaryPrimary brand color
--primary-foregroundText on primary color
--secondarySecondary color
--mutedMuted backgrounds
--accentAccent highlights
--destructiveError/danger color
--borderBorder color
--ringFocus ring color
--radiusBorder radius

See the Shadcn UI theming docs for the complete list.

Common Pitfalls

  • Editing shadcn-ui.css instead of custom.css: Your changes may be overwritten. Always use custom.css for customizations.
  • Wrong HSL format: Use 221.2 83.2% 53.3% not hsl(221.2, 83.2%, 53.3%). The hsl() wrapper is added by Tailwind.
  • Mismatched theme class: The shadcnUiStyle variable must exactly match the theme file name (e.g., style-nova not nova).
  • Forgetting dark mode: Always define both :root (light) and .dark (dark) variants for each variable.
  • Not restarting dev server: Tailwind v4 CSS changes may require a restart to take effect.

Frequently Asked Questions

How do I preview theme changes without restarting?
Most CSS variable changes apply immediately. If they don't, try a hard refresh (Cmd+Shift+R). For import changes, a restart is required.
Can I mix multiple themes?
Yes, but import order matters. Later imports override earlier ones. For mixing, define specific overrides in custom.css after the theme import.
How do I add custom Tailwind utilities?
Add them in custom.css using the @layer utilities directive. They'll be available throughout your application.
Does the theme affect email templates?
No. Email templates use inline styles. Update email styling separately in the email template components.

Next: Logo →