How to Integrate Lovable with Tailwind CSS

Before customizing anything, it helps to know what files control Tailwind in your Lovable project. Open your project and click the Code panel button (the angle-bracket icon in the top toolbar). If you are on a paid plan with Dev Mode enabled, you can browse the file tree directly. The two key files are tailwind.config.ts in the project root and src/index.css. The tailwind.config.ts file defines your theme — colors, fonts, spacing, border radii, animations, and plugins. The src/index.css file defines CSS custom properties (--background, --primary, --foreground, and others) that shadcn/ui components read via Tailwind's utility classes. Changes to tailwind.config.ts add new utilities; changes to index.css adjust the default values that shadcn components actually render. You do not need Dev Mode to make changes — you can ask Lovable in chat to show you the current contents of tailwind.config.ts, and it will display the file so you can see what is already configured before asking for modifications. This prevents accidentally overwriting customizations you have already made. If you have connected your project to GitHub, you can also view tailwind.config.ts directly in the repository without needing Dev Mode. Either way, seeing the current state before requesting changes gives Lovable's AI the context it needs to make precise, additive edits rather than rewriting the entire config from scratch.

Tailwind ships with a large default color palette (slate, gray, zinc, blue, violet, and others), but production apps need specific brand colors that match a design system or style guide. You extend — rather than replace — the default palette by adding values inside the theme.extend block in tailwind.config.ts. This preserves all default Tailwind colors while adding your custom ones as new utility classes. For example, adding a 'brand' color key with shades 50 through 950 creates utilities like bg-brand-500, text-brand-700, and border-brand-200 that you can use anywhere in your app. When you also want shadcn/ui components (buttons, badges, alerts) to use your brand colors, you need to update the corresponding CSS custom properties in index.css. The --primary variable controls the default button background, --primary-foreground controls button text, and --ring controls focus rings. Lovable handles both files simultaneously when you describe the change clearly. The most reliable way to prompt this is to give exact hex codes and specify which CSS custom property each maps to if you know it, or simply describe the visual result you want and let Lovable infer the mapping. For hex-to-HSL conversion (required for the index.css variables), just ask Lovable to do the conversion as part of the same prompt.

1import type { Config } from 'tailwindcss';
2
3const config: Config = {
4  darkMode: ['class'],
5  content: [
6    './pages/**/*.{ts,tsx}',
7    './components/**/*.{ts,tsx}',
8    './app/**/*.{ts,tsx}',
9    './src/**/*.{ts,tsx}',
10  ],
11  theme: {
12    extend: {
13      colors: {
14        // Brand palette — extend, don't replace default Tailwind colors
15        brand: {
16          50:  '#eff6ff',
17          100: '#dbeafe',
18          200: '#bfdbfe',
19          300: '#93c5fd',
20          400: '#60a5fa',
21          500: '#3b82f6',
22          600: '#2563eb',
23          700: '#1d4ed8',
24          800: '#1e40af',
25          900: '#1e3a8a',
26          950: '#172554',
27        },
28        secondary: {
29          50:  '#f5f3ff',
30          100: '#ede9fe',
31          200: '#ddd6fe',
32          300: '#c4b5fd',
33          400: '#a78bfa',
34          500: '#8b5cf6',
35          600: '#7c3aed',
36          700: '#6d28d9',
37          800: '#5b21b6',
38          900: '#4c1d95',
39          950: '#2e1065',
40        },
41      },
42    },
43  },
44  plugins: [],
45};
46
47export default config;

Tailwind's default font stack falls back to the operating system's sans-serif font, which varies across Windows, macOS, and mobile devices. For consistent brand typography, you load a specific web font and register it in tailwind.config.ts under theme.extend.fontFamily. The two-part process involves importing the font (via a link tag in index.html or a CSS @import in index.css) and then referencing that font family name in the Tailwind config. Once registered, you can use classes like font-sans on any element, or set a font as the default for the entire document by applying the font class to the body element in index.css. Google Fonts is the most common source — Lovable can add the correct link tag to index.html and configure the Tailwind fontFamily extension in one prompt. If you use Inter (the most popular choice for SaaS apps), note that many browsers and operating systems ship Inter natively, so the font may render immediately without a network request in many cases. For premium fonts from Adobe Fonts or a licensed type foundry, you provide the CSS @font-face declaration and Lovable wires it into the config the same way. The fontFamily config accepts an array of font names as a fallback chain — always include system-ui and sans-serif as final fallbacks so text remains readable if the web font fails to load.

1// In tailwind.config.ts — fontFamily extension
2theme: {
3  extend: {
4    fontFamily: {
5      sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
6      // Optional: separate display and mono stacks
7      display: ['Cal Sans', 'Inter', 'ui-sans-serif', 'system-ui'],
8      mono:  ['JetBrains Mono', 'ui-monospace', 'monospace'],
9    },
10  },
11},

Tailwind plugins extend the framework with pre-built utility classes beyond the defaults. The most important plugin for Lovable projects is tailwindcss-animate — it provides the keyframe animations that shadcn/ui components depend on for dialog open/close transitions, dropdown fades, tooltip appears, and accordion expansion. If your shadcn dialogs or dropdowns render without animation, or if you see build warnings about missing animation utilities, this plugin is either not installed or not registered in tailwind.config.ts. Another commonly useful plugin is @tailwindcss/typography, which adds the prose utility for rendering rich text content (markdown, blog posts, legal pages, documentation) with properly spaced headings, paragraphs, and code blocks. To add a plugin, you need both the package in package.json and an entry in the plugins array of tailwind.config.ts. Lovable handles both steps when you ask it in chat — it updates package.json, installs the dependency, and adds the plugin registration. You can verify the plugin is active by using one of its utility classes (like animate-in or prose) in a component and confirming no build error or unknown class warning appears. For Lovable projects that use shadcn/ui (which is all of them), tailwindcss-animate should be treated as a required plugin rather than an optional one. Check the current tailwind.config.ts before asking Lovable to add it, since it is already present in most Lovable projects.

1import type { Config } from 'tailwindcss';
2import animate from 'tailwindcss-animate';
3import typography from '@tailwindcss/typography';
4
5const config: Config = {
6  darkMode: ['class'],
7  content: [
8    './pages/**/*.{ts,tsx}',
9    './components/**/*.{ts,tsx}',
10    './app/**/*.{ts,tsx}',
11    './src/**/*.{ts,tsx}',
12  ],
13  theme: {
14    extend: {},
15  },
16  plugins: [
17    animate,
18    typography,
19  ],
20};
21
22export default config;

For complex Tailwind config changes, Lovable's @file syntax helps the AI focus on exactly the file you want to modify without accidentally altering unrelated components or other sections of the config. When you type @tailwind.config.ts in Lovable's chat input, the AI anchors its response to that specific file's current content, which is especially useful for additive changes — you want to add a new color to an existing palette, or register a new plugin alongside one that is already configured. You can combine @file references in one prompt: @tailwind.config.ts for the config and @src/index.css for the CSS variables, letting Lovable reason about both files simultaneously when making changes that touch both, such as adding a new color that needs both a Tailwind extension token and a CSS custom property for shadcn compatibility. To use this effectively, start your prompt with the @file reference and describe the change specifically: '@tailwind.config.ts — add a rose color palette under theme.extend.colors for my error state design, and update @src/index.css to set --destructive to rose-600 so shadcn alert components use it.' This focused approach produces more reliable edits on complex configuration files with many existing settings. For ambitious design system implementations involving many color tokens, typography scales, responsive breakpoints, and plugin configurations, RapidDev's team can help design the full tailwind.config.ts architecture and ensure consistency between the config, index.css, and component-level class usage.