How to Fix Tailwind CSS Not Working
On this page
How to Fix Tailwind CSS Not Working
Few things are more frustrating than adding class="text-3xl font-bold text-blue-600" to an element, refreshing the browser, and seeing... plain, unstyled text. Tailwind CSS is wonderfully productive once it's set up correctly, but its build-time, utility-scanning approach means a small misconfiguration can silently break every class you write.
The good news: "Tailwind not working" almost always comes down to a handful of well-understood causes. This guide walks through them in the order you should check, from the most common to the most obscure, so you can get back to building.
First, Confirm It's Actually Tailwind
Before diving into config files, rule out the simplest explanations. Open your browser's DevTools, inspect an element you styled, and look at the Styles panel.
- If you see your Tailwind classes listed but crossed out or absent, Tailwind isn't generating that CSS — this is a build/content configuration problem.
- If you see the classes applied but overridden by another rule, you have a CSS specificity or import-order issue.
- If the element has no Tailwind classes at all in the computed styles, the stylesheet may not be loading.
This three-way split tells you which section below to focus on.
Cause 1: Tailwind's Directives Aren't Imported
Your main CSS file must include Tailwind's layers. In Tailwind v3, that looks like:
@tailwind base;
@tailwind components;
@tailwind utilities;
In Tailwind v4, the syntax changed to a single import:
@import "tailwindcss";
If these lines are missing, misspelled, or in a CSS file that's never imported into your app, nothing will work. Double-check that this CSS file is actually imported in your entry point — for example import './index.css' in a React main.jsx, or linked in your HTML <head>.
Cause 2: The content Paths Are Wrong (The #1 Culprit)
Tailwind scans your files for class names and only generates the CSS for classes it actually finds. If your content (v3) or source globs (v4) don't point at your templates, Tailwind produces an almost-empty stylesheet.
In tailwind.config.js for v3:
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx,vue,svelte}",
],
theme: { extend: {} },
plugins: [],
}
Common mistakes here:
- Missing file extensions. If you write
.jsxfiles but only list.js, those classes won't be detected. - Wrong directory. Pointing at
./componentswhen your code lives in./src/components. - No
index.html. Vite and similar tools keep classes in the root HTML file — include it.
A quick diagnostic: temporarily make your content glob extremely broad, like "./**/*.{html,js,jsx,ts,tsx,vue}" (excluding node_modules). If styles suddenly appear, your paths were the problem — then narrow them back down for performance.
Cause 3: Dynamically Constructed Class Names
Tailwind works by static analysis — it looks for complete, literal class strings in your source. This means string concatenation breaks it:
// ❌ Tailwind never sees "text-red-500" as a complete string
const color = "red";
<div className={`text-${color}-500`}>Broken</div>
// ✅ Use complete class names
const colorClass = isError ? "text-red-500" : "text-green-500";
<div className={colorClass}>Works</div>
If you must build classes dynamically, map them to full strings or add them to a safelist in your config so Tailwind always generates them.
Cause 4: PostCSS Configuration Issues
Tailwind runs as a PostCSS plugin, and a missing or malformed PostCSS config is a frequent breakage — especially after upgrades.
For Tailwind v3, your postcss.config.js should contain:
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
For Tailwind v4, the PostCSS plugin moved to a separate package, @tailwindcss/postcss:
export default {
plugins: {
"@tailwindcss/postcss": {},
},
}
If you upgraded from v3 to v4 and left the old config in place, you'll get errors or silently broken output. This mismatch is one of the most common post-upgrade failures.
Cause 5: Wrong File Extension or Module Type
If your project uses "type": "module" in package.json, your config files must use ESM export default syntax. If it doesn't, use module.exports. Mixing these produces cryptic errors or configs that are silently ignored. When in doubt, rename to .cjs (CommonJS) or .mjs (ESM) to be explicit.
Cause 6: The Dev Server Wasn't Restarted
Changes to tailwind.config.js and postcss.config.js are not hot-reloaded. After editing either file, stop your dev server and start it again. Likewise, clearing stale build caches helps:
rm -rf node_modules/.vite # Vite
rm -rf .next # Next.js
This sounds trivial, but a surprising share of "Tailwind broke" reports are solved by a restart.
Cause 7: CSS Load Order and Specificity
If your Tailwind classes appear but are being overridden, the problem is cascade order. Make sure your Tailwind stylesheet loads after any other global CSS you don't want winning. Avoid sprinkling !important everywhere; instead, fix import order, or enable Tailwind's important option in the config if you genuinely need it to win against a third-party library:
export default {
important: true,
// ...
}
Cause 8: Editor Shows No Autocomplete or Warnings
If VS Code isn't suggesting classes, install the Tailwind CSS IntelliSense extension. If it still doesn't work, the extension may not detect your config — ensure tailwind.config.js is at the project root and isn't inside an ignored folder. Note this is an editor-experience issue, not a build issue; your styles can work fine even without IntelliSense.
A Quick Triage Checklist
When Tailwind stops working, run through this in order:
- Is the CSS file with
@tailwind/@import "tailwindcss"actually imported? - Do your
contentpaths cover every file with Tailwind classes, with correct extensions? - Are all class names complete, literal strings (no
text-${x})? - Is
postcss.config.jspresent and matching your Tailwind major version? - Did you restart the dev server after config changes?
- Are the styles generated but overridden (a cascade issue) rather than missing?
Ninety percent of cases are resolved by steps 1–4.
FAQ
Why do only some of my Tailwind classes work?
This is the classic symptom of dynamic class names or incomplete content paths. Tailwind generated the classes it could find statically but skipped the ones built at runtime or living in files it didn't scan. Use a safelist for unavoidable dynamic classes.
My Tailwind classes work in development but not in production. Why?
Production builds purge unused CSS aggressively. If a class only appears in a file outside your content globs, it survives in dev (where more is generated) but gets stripped in production. Audit your content paths and check that your build command runs the full PostCSS pipeline.
I upgraded to Tailwind v4 and everything broke. What changed?
v4 replaced the @tailwind directives with @import "tailwindcss", moved the PostCSS plugin to @tailwindcss/postcss, and shifted much configuration into CSS itself. Update your CSS import, install the new PostCSS package, and review the official upgrade guide before assuming your code is wrong.
Do I need both tailwind.config.js and postcss.config.js?
In v3, yes — PostCSS needs to know to run Tailwind. In v4, configuration is more CSS-driven and the config file is optional, but you still need the PostCSS plugin (or the dedicated Vite plugin) wired up.
Tailwind IntelliSense isn't autocompleting. Is my setup broken?
Not necessarily. IntelliSense is purely an editor convenience. If your styles render correctly in the browser, your build is fine — the missing autocomplete just means the extension can't locate your config. Reopen the project at its root and confirm the config file isn't gitignored or nested unexpectedly.
Could a browser cache be hiding my fixes?
Absolutely. After fixing config, do a hard refresh (Cmd/Ctrl+Shift+R) or open an incognito window. Stale cached CSS can make a correct fix look like it didn't work.
Final Thoughts
Tailwind "not working" is rarely a bug in Tailwind itself — it's almost always a gap between where your classes live and where Tailwind is looking. Internalize the build model: Tailwind scans files for literal class names and generates only what it finds. Once that clicks, debugging becomes mechanical. Check your imports, your content paths, your PostCSS config, and restart the server — and your utility classes will spring back to life.