Tailwind CSS classes not working / not applying styles

Your Tailwind classes are in the HTML but the styles aren’t showing up.

Fix 1: Check your content config

Tailwind purges unused classes. If your files aren’t in the content array, classes get removed:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,astro,html}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
};

Fix 2: Dynamic class names don’t work

// ❌ Tailwind can't detect dynamic classes
const color = 'red';
<div className={`bg-${color}-500`}>  // Gets purged!

// ✅ Use complete class names
<div className={color === 'red' ? 'bg-red-500' : 'bg-blue-500'}>

Fix 3: Restart the dev server

After changing tailwind.config.js, restart:

# Kill and restart
npm run dev

Fix 4: CSS specificity conflict

Another stylesheet might be overriding Tailwind. Use !important modifier:

<div class="!bg-red-500">  <!-- Forces the style -->

Related resources

• Tailwind CSS cheat sheet
• CSS complete guide
• CSS Flexbox & Grid cheat sheet