.gif)
Discover why Tailwind utility classes may fail in lovable projects and learn best practices for using TailwindCSS effectively.
Book a call with an Expert
Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.
Tailwind utility classes fail in Lovable projects because the generated Tailwind CSS isn’t actually being produced or included (missing @tailwind directives or missing import), the Purge/content configuration strips used classes (especially dynamic ones), postcss/build steps are misconfigured or not run inside Lovable’s environment, or framework-specific scoping (CSS modules, SSR, CDN mismatches) prevents the utility rules from reaching the page.
Paste these into Lovable chat. Each prompt tells Lovable exactly which files to inspect and what to change. I’m asking Lovable to create diffs/patches that you can review in Preview before publishing.
.png)
.png)
<pre>
// Open project and check these files. If any file is missing, create it.
// 1) Check for tailwind.config.js at project root and show contents.
// 2) Check for postcss.config.js at project root and show contents.
// 3) Check src/index.css (or src/styles/index.css). If it does not contain @tailwind base/components/utilities, add those directives.
// 4) Check main entry file (src/main.jsx, src/main.tsx, src/index.js, or pages/_app.js). Ensure it imports the entry CSS (import './index.css' or equivalent). If the import is missing, create a patch to add it at the top of that file.
// Return a summary report and produce a diff patch for any missing @tailwind import or missing CSS import.
<pre>
// Open tailwind.config.js and show the "content" (or "purge") array.
// If the globs do not include src/*/.{js,ts,jsx,tsx,html} and components/**, propose a patch to widen them.
// Scan project files for dynamic class usages (template literals, concatenation, classnames()) and list examples that Purge may miss.
// Produce a suggested safelist snippet (not auto-applied) showing exact classes or regex for safelist to include in tailwind.config.js.
<pre>
// Show postcss.config.js (or package.json "postcss" entry) and list plugins and order.
// Verify tailwindcss plugin is present and after 'postcss-import' if that exists.
// If missing, produce a patch to add a minimal postcss.config.js referencing tailwindcss and autoprefixer (do not run installs).
// If changes require npm/yarn install or terminal build, clearly mark them as "outside Lovable (terminal required)" and show commands.
<pre>
// Open package.json and show build/start scripts.
// If no build script runs PostCSS/Tailwind (for example a Vite/Next/CRA build should include bundling), report it.
// If the fix requires installing packages or running a CLI, create a short "outside Lovable" checklist with exact terminal commands and recommend GitHub export/sync to run CI locally.
<pre>
// Search project for CSS Modules usage (*.module.css) or Shadow DOM components that might scope styles.
// If using CDN approach, show the HTML head and check the CDN version vs project assumptions.
// Report any mismatches and show exact files/lines where utilities are being applied but no produced CSS exists.
This prompt helps an AI assistant understand your setup and guide you through the fix step by step, without assuming technical knowledge.
You can add Tailwind CSS inside Lovable by having Lovable create the Tailwind config, PostCSS entry, and the Tailwind CSS entry file plus the small app import changes — then export/sync to GitHub (or your local machine) to run the one-time npm install/build step. Paste the Lovable prompts below to make Lovable create/update the exact files; after that you must run the dependency install/build outside Lovable (instructions included).
Tell Lovable to detect whether the project is Vite/React or Next.js and apply the matching changes. If unsure, apply both sets. Create/update the listed files exactly as written so Tailwind is wired in and import the CSS from the application entry.
// If project is Vite + React (common paths)
Create file: tailwind.config.js
// Use content paths for Vite/React
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,jsx,ts,tsx}"
],
theme: { extend: {} },
plugins: []
}
Create file: postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
Create file: src/styles/tailwind.css
/* Tailwind base components utilities */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* optional: add app-level custom styles below */
/* // */
Update file: src/main.jsx (or src/main.tsx) to add this import at top:
import './styles/tailwind.css'
// keep the rest of the file as-is
// If project is Next.js
Create file: tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,jsx,ts,tsx}",
"./components/**/*.{js,jsx,ts,tsx}",
"./app/**/*.{js,jsx,ts,tsx}"
],
theme: { extend: {} },
plugins: []
}
Create file: postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
Create file: styles/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* // */
Update file: pages/_app.jsx (or pages/_app.tsx) to import the CSS at top:
import '../styles/tailwind.css'
// keep the rest of the file as-is
Important: Lovable cannot run npm/yarn inside the browser. After Lovable has created the files above, export or sync the repo to GitHub (or pull locally) and run the install/build step on your machine or CI. Use one of these commands in your terminal.
Have Lovable add a small component to confirm Tailwind classes render. Prompt Lovable to edit a page/component and include a visible Tailwind class so you can Preview in Lovable before exporting.
Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!
.svg)
Use the Tailwind CDN for fast, reliable iteration inside Lovable Preview and only add a full Tailwind build (tailwind.config.js, PostCSS, npm scripts) when you export/sync to GitHub and run the install/build outside Lovable; always safelist dynamic classes, keep classes static where possible, and test in Lovable Preview before publishing.
Use the Tailwind Play CDN so you can edit UI and see results in Lovable Preview without any build step.
// Update public/index.html (or src/index.html) head to include the Tailwind Play CDN // Add the <script src="https://cdn.tailwindcss.com"></script> line in the <head>.// For example, tell Lovable:
"Edit public/index.html: add inside <head> the line <script src='https://cdn.tailwindcss.com'></script>. If the project uses src/index.html instead, update that file instead. Leave existing CSS files alone but remove any conflicting compiled Tailwind imports for preview simplicity."
For a production build (purging, custom config, PostCSS) you must add config files in Lovable and then export/sync to GitHub and run npm install/build on your machine or CI.
// Create tailwind.config.js at project root with content globs that include Lovable source folders // Create postcss.config.js at project root // Create src/styles/tailwind.css with @tailwind directives // Update package.json scripts: "build:css": "tailwindcss -i src/styles/tailwind.css -o dist/tailwind.css --minify"// Tell Lovable to create these files exactly as above and then sync to GitHub:
// Note: building requires running npm install and npm run build:css outside Lovable (terminal required).
// Update tailwind.config.js to include your app paths and a safelist for dynamic classes
// Example instruction for Lovable:
// "Edit tailwind.config.js: set content to ['./src/\*_/_.{js,ts,jsx,tsx,html}', './components/\*_/_.{js,ts,jsx,tsx}'] and add a safelist array for classes generated at runtime like ['bg-red-500','text-lg']."
From startups to enterprises and everything in between, see for yourself our incredible impact.
They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.
