Tailwind CSS v3 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 CSS (v3):

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

This corrected the issue for me.

Official documentation: Content Configuration

For Tailwind 4 users, tailwind.config.js no longer applies. See "explicitly registering sources" section of Detecting classes in source files.

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 specifying what type I'm working on, .tsx or .jsx. And I was leading to a wrong path, so check this, as well.

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

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.

Your tailwind.config.js file can’t find your index.html file.

In the Tailwind CSS configuration 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 extensions like .ts, .jsx, etc., you have to define the file extension in content: ['./*.{html,js,ts,jsx}']

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 file 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 three templates I have to start Angular from /src/app/ folder with ng serve.

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

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

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

If you use Vite 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}",
    ],

I was facing the same problem, the solution is to make sure your content configuration is correct. refer

1. In your tailwind.config.js: Make sure the content source is pointing to your HTML files that are using tailwind. refer

module.exports = {
  content: [
    './components/**/*.{html,js}',
    './pages/**/*.{html,js}',
    './index.html',
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

2. Restart the Tailwind CLI build process

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

** Ensure there are no warning messages regarding invalid file paths.

You will also see this warning if you haven't actually set any class statements.

So, if you're starting a new project, and you're 100% sure your config file is correct, make sure you have at least one class statement in one of your files.

For example

<div class="w-full">Hello</div>

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")],
};

In addition to the other solutions, this can happen if you've changed the prefix value in your configuration file.

Just add this to into global.css

@tailwind variants;

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}.

Originally I used it well, but when i builded a new project i found it was not working anymore. I have tried many solutions and tried to check what I did wrong, but in the end, i found it just a matter of path. so i mean, you need to check the path, "./pages/......"or"./src/pages/......."

I got the same error. But when I started adding tailwind classes to the components and restarted the server, it's gone.

I think it might due to no class names found in any of the files it scanned.

I had to delete my package-lock.json and recreate with npm install.

I had tried everything up and to that point but this worked.

Some frameworks hide their main HTML entry point in a different place than the rest of your templates (often public/index.html), so if you are adding Tailwind classes to that file make sure it’s included in your configuration as well:

Don't forget your HTML entry point if applicable

tailwind.config.js

  content: [
    './public/index.html',
    './src/**/*.{html,js}',
  ],
  // ...
}

It worked when I removed the dot before the curly braces like content: ["./src/**/*{js, jsx,}"] or add them individually like content: ["./src/**/*{.js, .jsx,}"]

I don't really understand why but I get an error when I configure it like content: ["./src/**/*.{js, jsx,}"]

I'm using Vite inside a monorepo (turborepo). Prefixing the content glob with __dirname fixed it for me:

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

This depends on the file you are working on. For example, 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 configuration file:

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

After you read the Tailwind CSS installation carefully and did all the steps, make sure, when you run the project (npm run or ng serve or anything else) be at the same directory that package.json is.

Just in case someone is playing around with only HTML and Tailwind CSS (no JavaScript), as I was :), you need a server running to serve the Tailwind CSS styles or adjust the path to where the CSS file is.

If you're using Visual Studio Code you can use for example the extension Live Server to start a server to host your static HTML files.

If you want to run your HTML file without a server, then make sure to adjust the link to the absolute path of your CSS file, e.g.: <link href="/home/john/project/dist/output.css" rel="stylesheet">

As mentioned above, when declaring multiple file types in the tailwind.config.js => content make sure to don't have any space between them! And always double-check your paths.

Happy styling with Tailwind CSS!

This error was due to Tailwind was not able to access the generic path which it suppose to check for tailwind classNames.

How i was able to resolve the issue below whereby I picked and added any file within my project.

my previous code

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

my updated code
content: ["./app/(tabs)/_layout.tsx", "./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  
   

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}",
  ],

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}']