Tailwind CSS classes is not working in my project?

This error is due to tailwind not finding any classes to scan in what it 'thinks' is your HTML code directories.

This section in your tailwind.config.js file determines which files are scanned to be processed by tailwind

  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],

This corrected the issue for me.

Official documentation: https://tailwindcss.com/docs/content-configuration

I had this issue too, but I may have solved it. Originally content in my tailwind.config.js file looked like this:

content: ["./src/**/*.{html,js}"]

I noticed that my App.js file was actually App.jsx so I just inserted single letter 'x' into that line:

content: ["./src/**/*.{html,jsx}"]

It seems to have worked.

I was facing the same problem, after some tests, i found a solution, but i don't know the right solution or why this is occurring, so if anyone has a clue, let us know.

content: [
    './pages/**/*.tsx',
    './components/**/*.tsx',
  ],

or

content: [
        './pages/**/*.jsx',
        './components/**/*.jsx',
      ],

Tailwind is not recognizing the options between {}, so i just specify what type i'm working, tsx or jsx. And i was leading to a wrong path, so check this, as well.

Your tailwind.config.js file cant find your index.html .

in tailwind config file add your file path into content array './index.html',

You have to define your file path into content like below

module.exports = {
  content: ["./src/**/*.{html,js}",

  '*.{html,js}'], //like this

  theme: {
    extend: {},
  },
  plugins: [],
}

By the way if you have different file extenstion like .ts .jsx etc. you have to define file extension in conttent: ['./*.{html,js,ts,jsx}']

Don't use the curly braces; instead, specify the following.

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

Although I added content in tailwind.config, it was still giving warnings.

I was running command to build the output:

npx tailwindcss -i ./input.css -o ./build/output.css

added -cli to the command and it worked for me:

npx tailwindcss-cli -i ./input.css -o ./build/output.css

You can configure content like this content: ["./src/index.html"], or you can watch this video

If you use ViteJS then configure in file tailwind.config.js:

 content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"]

Or you use Yarn, Npm, etc... then configure in file tailwind.config.js:

 content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
    ],

Just add this to into global.css

@tailwind variants;

Like others said it depends if you are working with JS, TypeScript, or even HTML. In each case, you need to say the config to which files it will apply.

This is my config and I work with TypeScript:

/** @type {import('tailwindcss').Config} */
module.exports = {
    purge: ["./src/components/**/*.tsx", "./pages/**/*.tsx"],
    theme: {
        extend: {},
    },
    variants: {},
    plugins: [require("tailwindcss"), require("precss"), require("autoprefixer")],
};

this depends on the file you are working on, for exemple if you're working on .js and .html file then you need to specify it in your tailwind.config.js file like this :

content: ["./src/**/*.{html,js}"]

if you're also working on .jsx file, then you only have to add it to your config file:

content: ["./src/**/*.{html,js,jsx}]

The path may have been changed in your project. Check your path and configure accordingly. E.g., if you have moved your pages & components to your src folder, add the following to your Tailwind config file.

  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],

Had the same problem. In my case I had spaces before file extensions in tailwind.config.js.

Wrong version:

  content: [
      "./assets/**/*.{vue, js, ts, jsx, tsx}",
      "./templates/**/*.{html, twig}"
  ],

Correct version:

  content: [
      "./assets/**/*.{vue,js,ts,jsx,tsx}",
      "./templates/**/*.{html,twig}"
  ],

It basically looks for your component files, so you have to configure the path that way.

Suppose you just started a react project, added tailwind, and you want to check. in that case you can add the following to your, tailwind.config.js file. This will locate the App.jsx file in your src directory of the project.

  content: [
    './src/.{html,jsx}',
  ],

On another case, if you have a components directory inside of which you different directories for different components you can add the following to your tailwind.config.js file.

  content: [
    './src/**/*.{html,jsx}',
  ]

Just Import TailwindCSS into your pages/_app.js file:

import '../styles/globals.css'
import 'tailwindcss/tailwind.css';

function MyApp`enter code here`({ Component, pageProps }) {
return <Component {...pageProps} />
}

export default MyApp

Make sure your Tailwind config file doesn't contain duplicated properties. In my case, the content property had been repeated twice. After removing one of them it worked as supposed to.

Ran into this issue when doing an upgrade to 3.1.x from 2.2 and did not complete all the upgrade steps.

Specifically, I added the content entry but did not remove the purge entry

module.exports = {
  purge: [],
  content: ['./src/**/*.{js,jsx,ts,tsx}']

After I removed the purge line, the util classes where included.

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}']

Had the same problem, check your path to your templates in tailwind.config.js

Path might begin with .. instead of .

content: [
'../src/app/app.component.html'
]

instead of

content: [
'./src/app/app.component.html'
]

This was my problem.

I think I've found the answer to the problem of Tailwind not building classes.

Besides the config of tailwind.config content sources, what really matters is:

FROM WHICH FOLDER YOU START YOUR APP WITH NG SERVE

For example, my tailwind.config is

module.exports = {
  content: ["app.component.html", "product/product.component.html", "home/home.component.html"]
  theme: {
    extend: {},
  },
  plugins: [], 
}

for Tailwind to find the classes in those 3 templates I have to start Angular from /src/app/ folder with ng serve.

If I start Angular from /src/ folder then Tailwind will not find any classes.

This is what worked in my case. I had to use path in the tailwind.config.js file to make it work.

const { join } = require('path');

module.exports = {
  content: [join(__dirname, 'src/**/*.{js,ts,jsx,tsx}')],
  theme: {
    extend: {},
  },
  plugins: [],
};

for anyone that is using Tailwind with Next js and Tailwind css. Add this to your content value :

    content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],

Attention!!!!!!!!!!!!!!!!! the warning will still there even if you corrected the content path,

You need to add minimum one Tailwind CSS class to one of the paths you mentioned in content, just use a tailwind css in your project, and the warning will disappear. :)

I had a similar problem where some tailwind styles were working and other ones were not. After trying everything on this thread I got the impression that it could be something to do with adding the wrong object in the tailwind config. I remembered that I had added some bespoke fontsizes recently and had added this directly in the theme object. I moved it to the extension object and it worked immediately. For example:

Not working:

Working:

Make sure that in content, the string doesn't contain spaces: {.js,.jsx} instead of {.js, .jsx}.