Published on

Fix: No Utility Classes Were Detected in Tailwind CSS

Authors
  • Name
    Ripal & Zalak
    Twitter

Fix: No Utility Classes Were Detected in Tailwind CSS

If you're setting up Tailwind CSS and encountering the warning:

"No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration."

This usually happens due to an incorrect file path in your tailwind.config.js file or because Tailwind cannot find any utility classes in your project.

Why Does This Error Occur?

  1. Incorrect Content Paths – Tailwind doesn’t detect your HTML/JS files.
  2. No Tailwind Classes in the Project – If Tailwind classes aren’t used, it may show this warning.
  3. Generated CSS Not Linked Properly – The CSS output file might not be correctly referenced in your HTML.
  4. Issues with Tailwind Watch Mode – Running Tailwind CLI incorrectly can prevent proper updates.

✅ Solution 1: Fix Content Paths in tailwind.config.js

Ensure the content field includes the correct directories where your HTML/JS files exist.

Correct Configuration:

module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}', './public/index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Explanation:

  • ./src/**/\*.{html,js,jsx,ts,tsx} → Ensures Tailwind scans all files inside src/.
  • ./public/index.html → Includes files in public/ where your HTML might reside.

✅ Solution 2: Add Tailwind Classes in Your Files

If Tailwind detects no utility classes, just add one in your file.

Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="./output.css" rel="stylesheet" />
  </head>
  <body class="bg-blue-500 text-center text-white">
    <h1 class="text-3xl">Hello, Tailwind!</h1>
  </body>
</html>

This ensures Tailwind sees utility classes and compiles correctly.

✅ Solution 3: Ensure CSS is Generated and Linked

If your Tailwind styles are missing, ensure the output CSS is correctly linked.

Example Command:

npx tailwindcss -i ./src/input.css -o ./public/output.css --watch

Steps:

  1. Check File Structure:
    /public
├── index.html
├── output.css  ✅ Ensure this exists
/src
├── input.css ✅ Contains Tailwind directives
├── components/
  2. Ensure input.css contains Tailwind directives:
    @tailwind base;
@tailwind components;
@tailwind utilities;
  3. Restart Tailwind Watch Mode
    npx tailwindcss -i ./src/input.css -o ./public/output.css --watch

✅ Solution 4: Restart Your Development Server

If you've modified the tailwind.config.js file, restart your dev server:

npm run dev

Or if using Vite:

npm run build && npm run preview

✅ Solution 5: Delete Cache (Angular Users)

If you’re working with Angular, delete the .angular cache:

rm -rf .angular
ng serve

🔥 Final Checklist:

✅ Ensure tailwind.config.js includes all necessary directories. ✅ Add at least one Tailwind class in your HTML or JSX files. ✅ Correctly link the output CSS in your HTML files. ✅ Run Tailwind in watch mode properly. ✅ Restart your development server after changes.

FAQs

1. Why is Tailwind not generating styles?

Check if:

  • The content array in tailwind.config.js includes your source files.
  • Your input.css has @tailwind base;, @tailwind components;, @tailwind utilities;.
  • You are running npx tailwindcss -i ./src/input.css -o ./public/output.css --watch.

2. How do I check if Tailwind is working?

Add a Tailwind class manually in your HTML:

<div class="bg-red-500 text-white">Test Tailwind</div>

If the background turns red, Tailwind is working!

3. Can I use Tailwind with JSX/React?

Yes, include Tailwind classes inside JSX like this:

export default function Home() {
  return <div className="bg-blue-600 p-5 text-white">Hello, Tailwind!</div>
}