Ensuring TailwindCSS classes apply properly in v0 components

Why Tailwind classes stop working in V0 components

V0 generates Tailwind CSS classes that work perfectly in its preview sandbox. Problems appear after exporting the code to a local project or when mixing V0-generated code with an existing codebase. The most common cause is a Tailwind version mismatch: V0 historically used Tailwind v3.4.17 (updated to v4.2.0 in February 2026), while create-next-app defaults to Tailwind v4 with CSS-based configuration instead of tailwind.config.js. The two versions use different configuration formats and may not recognize the same utility classes.

• Tailwind v3/v4 version mismatch between V0 export and the target project
• Missing Tailwind directives in globals.css (@tailwind base; @tailwind components; @tailwind utilities;)
• Content paths in tailwind.config.js not including V0 component directories
• Dynamic class names constructed with template literals not picked up by Tailwind's class scanner
• PostCSS configuration missing or misconfigured after export

Error messages you might see

Before you start

• A V0 project or exported V0 code with styling issues
• Access to project configuration files (globals.css, tailwind.config)
• Basic understanding of Tailwind CSS utility classes

How to fix it

/* globals.css — missing Tailwind directives */
body {
  margin: 0;
  font-family: sans-serif;
}

/* globals.css — Tailwind v3 */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* OR for Tailwind v4 */
@import "tailwindcss";
body {
  margin: 0;
  font-family: sans-serif;
}

// V0 export: tailwindcss v3.4.17 in package.json
// Local project: tailwindcss v4.1.4 from create-next-app

// Option 1: Downgrade local project to match V0
// In package.json: "tailwindcss": "^3.4.17"
// Option 2: Keep v4 and migrate config
// Remove tailwind.config.js
// Update globals.css: @import "tailwindcss";

// tailwind.config.js — missing component paths
module.exports = {
  content: ['./app/**/*.{ts,tsx}'],
  theme: { extend: {} },
};

// tailwind.config.js — all V0 paths included
module.exports = {
  content: [
    './app/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './lib/**/*.{ts,tsx}',
  ],
  theme: { extend: {} },
};

// Conflicting classes — unpredictable result
<div className={`p-4 ${isActive ? 'bg-blue-500 p-6' : 'bg-gray-100'}`}>
  Content
</div>

import { cn } from '@/lib/utils';
<div className={cn('p-4', isActive ? 'bg-blue-500 p-6' : 'bg-gray-100')}>
  Content
</div>

Complete code example

1import { type ClassValue, clsx } from 'clsx';
2import { twMerge } from 'tailwind-merge';
3
4/**
5 * Merges Tailwind CSS classes safely.
6 * Uses clsx for conditional classes and
7 * tailwind-merge to resolve conflicts.
8 *
9 * Example:
10 * cn('p-4 bg-red-500', isActive && 'bg-blue-500 p-6')
11 * When isActive: 'bg-blue-500 p-6' (p-6 overrides p-4, blue overrides red)
12 * When !isActive: 'p-4 bg-red-500'
13 */
14export function cn(...inputs: ClassValue[]) {
15  return twMerge(clsx(inputs));
16}
17
18// This file is auto-generated by V0/shadcn.
19// It's the standard utility used across all
20// shadcn/ui components for class merging.
21//
22// Dependencies: clsx, tailwind-merge
23// Install: npm install clsx tailwind-merge

Best practices to prevent this

• Always verify globals.css has Tailwind directives before debugging individual class issues
• Match Tailwind major versions between V0 export and your local project — v3 and v4 are not compatible
• Use the cn() utility from lib/utils for all conditional or merged class names
• Never construct Tailwind class names dynamically with template literals — use complete class strings for the scanner to find
• Include all component directories in the tailwind.config.js content array (Tailwind v3)
• Install the Tailwind CSS IntelliSense VSCode extension to catch class name errors during development
• Test exported V0 code in a clean local environment to catch Tailwind configuration issues early
• Keep PostCSS configured with tailwindcss and autoprefixer plugins in postcss.config.js

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns

Explore related guides

Guides from other topics that help with this issue