CSS Error3 Fixes Available

Tailwind CSS styles are not applying to my elements

Tailwind CSS classes (like bg-blue-500) are in the HTML but nothing changes in the browser.

What does this error mean?

This happens when Tailwind's Just-In-Time (JIT) engine doesn't 'see' your file. Tailwind only generates the CSS for classes it finds in the files listed in your config. If your file isn't in that list, no CSS is generated for those classes.

Common Causes

The file path is missing from the 'content' array in tailwind.config.js
The Tailwind build process isn't running (npx tailwindcss -i ...)
A typo in the Tailwind class name (e.g., bg-blue-550 instead of 500)
Browser caching or CSS specificity overriding Tailwind classes

How to Fix It (3 Solutions)

Check your tailwind.config.js content path

Make sure all your source files are included in the content array.

Code

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}", // Check if this matches your structure
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  // ...
}

Ensure the PostCSS plugin is running

If using Next.js or Vite, ensure tailwindcss is in your postcss.config.js.

Code

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Hard refresh your browser

Sometimes the old CSS is cached. Use Ctrl + F5 (Cmd + Shift + R on Mac) to force a refresh.

Fix this error faster with our free tool

CSS Unit Converter (PX to REM)

Open CSS Unit Converter (PX to REM)

Related Errors

CSS

Flexbox not centering / flex properties not working

View fix

CSS

CSS styles not applying — specificity conflict

View fix

CSS

CSS styles not applying — specificity issue

View fix

Browse all error fixes