How to Integrate Tailwind with V0

Every V0-generated Next.js project comes with Tailwind CSS pre-installed and configured. The default setup consists of three files you need to know about. First, tailwind.config.ts in the project root: this file controls which files Tailwind scans for class names (the content array), and the theme configuration including any extensions. By default, V0 projects extend Tailwind's default theme with shadcn/ui CSS variables for semantic color naming — you'll see references to hsl(var(--primary)), hsl(var(--background)), and so on. Second, app/globals.css: this file applies Tailwind's base styles (@tailwind base; @tailwind components; @tailwind utilities;) and defines CSS custom properties (variables) for all the semantic colors used by shadcn/ui components. Third, the package.json: check the tailwindcss version listed here — V0 historically generated projects with tailwindcss 3.4.x, but newer projects may use v4. Knowing which version you have is important because the configuration API changed significantly between v3 and v4. To check: open package.json and look for the tailwindcss entry in devDependencies. V3 uses a tailwind.config.ts file for all configuration. V4 uses a CSS-first approach where you configure Tailwind in globals.css using @theme and @import 'tailwindcss'. Open these files in V0's code editor to understand the baseline before making any changes.

1// tailwind.config.ts — default V0/shadcn setup (Tailwind v3)
2import type { Config } from 'tailwindcss';
3
4const config: Config = {
5  darkMode: ['class'],
6  content: [
7    './pages/**/*.{js,ts,jsx,tsx,mdx}',
8    './components/**/*.{js,ts,jsx,tsx,mdx}',
9    './app/**/*.{js,ts,jsx,tsx,mdx}',
10  ],
11  theme: {
12    extend: {
13      colors: {
14        background: 'hsl(var(--background))',
15        foreground: 'hsl(var(--foreground))',
16        primary: {
17          DEFAULT: 'hsl(var(--primary))',
18          foreground: 'hsl(var(--primary-foreground))',
19        },
20        // ... more shadcn/ui color tokens
21      },
22      borderRadius: {
23        lg: 'var(--radius)',
24        md: 'calc(var(--radius) - 2px)',
25        sm: 'calc(var(--radius) - 4px)',
26      },
27    },
28  },
29  plugins: [],
30};
31
32export default config;

The most impactful customization you can make is adding your brand's colors to tailwind.config.ts. This gives you semantic class names like bg-brand-primary and text-brand-accent that map to your exact hex values. V0 will use these classes in generated components as soon as they're in the config. To add brand colors, open tailwind.config.ts in V0's code editor and add a colors object inside theme.extend. Use a nested structure with a brand namespace to keep your custom colors organized and avoid accidentally overriding Tailwind's built-in colors. For example, brand.primary maps to your main brand color, brand.secondary to an accent, and brand.neutral-50 through brand.neutral-900 for a grayscale. You can also remap Tailwind's semantic primary color if you want all shadcn/ui components to use your brand color by default — this involves updating the --primary CSS variable in globals.css to use your brand's HSL values rather than replacing the tailwind.config.ts entry. For fonts, add fontFamily.sans with your custom font name and the system font stack fallback. The font must be loaded in globals.css via @import or the Next.js Font module — just adding it to tailwind.config.ts without loading the font file will cause fallback to a system font. For spacing and sizing, add custom values to theme.extend.spacing for any spacing tokens that deviate from Tailwind's 4px base scale (like a 6px or 10px gap that your designer specified).

1import type { Config } from 'tailwindcss';
2
3const config: Config = {
4  darkMode: ['class'],
5  content: [
6    './pages/**/*.{js,ts,jsx,tsx,mdx}',
7    './components/**/*.{js,ts,jsx,tsx,mdx}',
8    './app/**/*.{js,ts,jsx,tsx,mdx}',
9  ],
10  theme: {
11    extend: {
12      colors: {
13        // Keep shadcn/ui semantic colors
14        background: 'hsl(var(--background))',
15        foreground: 'hsl(var(--foreground))',
16        primary: {
17          DEFAULT: 'hsl(var(--primary))',
18          foreground: 'hsl(var(--primary-foreground))',
19        },
20        // Add your brand colors
21        brand: {
22          primary: '#2563EB',
23          'primary-dark': '#1D4ED8',
24          'primary-light': '#93C5FD',
25          secondary: '#7C3AED',
26          accent: '#F59E0B',
27          success: '#10B981',
28          danger: '#EF4444',
29          'neutral-50': '#F8FAFC',
30          'neutral-100': '#F1F5F9',
31          'neutral-200': '#E2E8F0',
32          'neutral-700': '#334155',
33          'neutral-900': '#0F172A',
34        },
35      },
36      fontFamily: {
37        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
38        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
39      },
40      spacing: {
41        '18': '4.5rem',
42        '88': '22rem',
43        '128': '32rem',
44      },
45      borderRadius: {
46        'xl': '12px',
47        '2xl': '16px',
48        'card': '12px',
49        // Keep shadcn/ui radius tokens
50        lg: 'var(--radius)',
51        md: 'calc(var(--radius) - 2px)',
52        sm: 'calc(var(--radius) - 4px)',
53      },
54    },
55  },
56  plugins: [],
57};
58
59export default config;

Adding a font to tailwind.config.ts makes the class available, but the font file still needs to be loaded into the browser. In Next.js App Router projects, there are two ways to load fonts. The first and recommended way is the next/font module, which automatically optimizes font loading, eliminates layout shift, and avoids an external network request. Import your Google Font using next/font/google in your root layout and apply the CSS variable it generates to the html element. Then reference that CSS variable in tailwind.config.ts. The second way is a direct @import statement in globals.css — simpler but slightly less performant since it requires an external request to Google's servers. For custom self-hosted fonts, add the font files to the public/ directory and use @font-face declarations in globals.css. Whichever method you choose, verify the font is loading by opening your browser's DevTools → Network tab, filtering for 'font', and checking that the font file loads with a 200 status. Also check the Computed Styles panel for a text element — the font-family property should show your custom font name, not a system fallback. If you see system-ui or Arial in Computed Styles, the font isn't loading and you need to check your import or @font-face declaration.

1// app/layout.tsx — using next/font for optimal loading
2import { Inter } from 'next/font/google';
3import './globals.css';
4
5const inter = Inter({
6  subsets: ['latin'],
7  variable: '--font-inter',
8  display: 'swap',
9});
10
11export default function RootLayout({
12  children,
13}: {
14  children: React.ReactNode;
15}) {
16  return (
17    <html lang="en" className={inter.variable}>
18      <body className="font-sans">{children}</body>
19    </html>
20  );
21}
22
23// tailwind.config.ts — reference the CSS variable
24// theme.extend.fontFamily:
25// sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],

One of the most common issues in V0 projects is a Tailwind version mismatch. V0's AI model was trained predominantly on Tailwind v3 patterns, but create-next-app now installs Tailwind v4 by default. The two versions have significant differences that cause runtime errors. In Tailwind v3, all configuration lives in tailwind.config.ts. In Tailwind v4, configuration is CSS-first: you import Tailwind in globals.css with @import 'tailwindcss' and define theme customizations using @theme blocks directly in CSS. Several v3 patterns break in v4: the theme() CSS function, the @layer utilities block, and the tailwind.config.ts file itself (v4 ignores it unless you explicitly opt in with @config). To diagnose which version you have, check package.json: tailwindcss: '3.x.x' is v3, tailwindcss: '4.x.x' is v4. The safest fix for most V0 projects is to pin to Tailwind v3 by updating package.json to use tailwindcss: '^3.4.17' and reinstalling. This ensures V0's generated class names and config syntax work exactly as expected. If you want to use v4, you need to migrate your configuration from tailwind.config.ts to @theme blocks in globals.css and remove any theme() function calls from CSS. For new V0 projects where you want v4, prompt V0 explicitly: 'This project uses Tailwind v4. Use @theme in globals.css for custom values, not tailwind.config.ts'.

1/* app/globals.css — Tailwind v4 configuration approach */
2@import 'tailwindcss';
3
4/* In v4, theme customization goes here instead of tailwind.config.ts */
5@theme {
6  --color-brand-primary: #2563eb;
7  --color-brand-secondary: #7c3aed;
8  --color-brand-accent: #f59e0b;
9
10  --font-family-sans: 'Inter', system-ui, sans-serif;
11
12  --radius-card: 12px;
13  --radius-button: 8px;
14}
15
16/* v3 globals.css for comparison — uses @tailwind directives */
17/* @tailwind base;                   ← v3 syntax */
18/* @tailwind components;             ← v3 syntax */
19/* @tailwind utilities;              ← v3 syntax */
20
21/* To pin to v3, update package.json: */
22/* "tailwindcss": "^3.4.17" */

V0 generates responsive and dark-mode-ready components when you use shadcn/ui, but you need to ensure the configuration supports your requirements. For dark mode, V0 projects use the 'class' strategy by default — meaning you add a dark class to the html element to activate dark mode, rather than relying on the OS preference media query. The shadcn/ui components handle dark mode automatically with their CSS variable approach. To implement a dark mode toggle, you need a small component that adds or removes the dark class from document.documentElement and persists the preference in localStorage. For custom breakpoints, V0 uses Tailwind's defaults: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). If your design has a different breakpoint scale (for example, your designer uses 360, 768, 1024, and 1440 as breakpoints), add them to theme.extend.screens in tailwind.config.ts. Custom screen values work alongside Tailwind's defaults — you can add tablet: '900px' without removing the existing md breakpoint. When prompting V0 to generate responsive components, mention your custom breakpoints explicitly: 'use the tablet: breakpoint for the two-column layout, not md'. This ensures the generated code uses your breakpoints rather than Tailwind's defaults.

1// tailwind.config.ts — dark mode and custom breakpoints
2import type { Config } from 'tailwindcss';
3
4const config: Config = {
5  // 'class' strategy: dark mode activates when <html class='dark'>
6  darkMode: ['class'],
7  content: [
8    './pages/**/*.{js,ts,jsx,tsx,mdx}',
9    './components/**/*.{js,ts,jsx,tsx,mdx}',
10    './app/**/*.{js,ts,jsx,tsx,mdx}',
11  ],
12  theme: {
13    extend: {
14      // Custom breakpoints (adds to defaults, doesn't replace them)
15      screens: {
16        'xs': '375px',
17        'tablet': '900px',
18        '3xl': '1600px',
19      },
20      // shadcn/ui semantic colors work in dark mode via CSS vars
21      colors: {
22        background: 'hsl(var(--background))',
23        foreground: 'hsl(var(--foreground))',
24        primary: {
25          DEFAULT: 'hsl(var(--primary))',
26          foreground: 'hsl(var(--primary-foreground))',
27        },
28        muted: {
29          DEFAULT: 'hsl(var(--muted))',
30          foreground: 'hsl(var(--muted-foreground))',
31        },
32      },
33    },
34  },
35  plugins: [],
36};
37
38export default config;