Tailwind CSS classes is not working in my project

Question

Here is my HTML link https://play.tailwindcss.com/fbB4GCL0ht

Visual Studio Code setup pictures

Tailwind.Config.js

All files

warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration Done in 320ms.

This is showing my Visual Studio Code Terminal. What should I do? I have also added base components and utilities.

Answer 1

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.

Answer 2

This is only a warning that you don't use any tailwindcss utility classes in your project. If you remove @tailwind utilities; from your .css-File, the warning is gone.

like so:

@tailwind base;
@tailwind components;
// @tailwind utilities;

You can remove the comment when you use utility classes from tailwind. for example:

 <div class="shadow-md ..."></div>

Answer 3

like the other answers pointed out it might be the content file but for my case since I completely restructured my project before installing taiwilnd, I did not have the CSS file with the tailwind directives

src/app/styles/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Because of this the styles were not loading properly, this is my tailwind.config.js

 ./tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.jsx",
   ],
  theme: {
     extend: {},
   },
    plugins: [],
   }

for others facing this issue do make sure that the directives are imported to their main file in my case it was ./main.jsx

Answer 4

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

Answer 5

In my case, I added this to main file:

import '../app/globals.css'

Answer 6

I was using Angular 11 with Tailwind ^3.4.4 and was facing an abrupt issue where the Tailwind classes were partially loaded during serve. For example, class flex would work but not max-w-full.

Tailwind was not recognizing the HTML changes that the new classes were added to any element and whenever I change any .scss file or tailwind.config.js file the changes would reflect. To overcome this, you need to perform the following:

• Check the content property: It is the soul of Tailwind, if you have made a mistake in this file, no matter what, the Tailwind classes won't work. Like others and as stated in Tailwind-Angular docs, I was using the following value for content in my config:

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

1. Mind you this paths here are relative to PROJECT ROOT as stated in official docs:

Paths are relative to your project root, not your tailwind.config.js file, so if your tailwind.config.js file is in a custom location, you should still write your paths relative to the root of your project.

Also, if you have your tailwind.config.js file situated in some nested directory, the path will change accordingly. Mine was at the root of the project.

1. During the serve or build, the index.html is served as the main HTML, so you also need to add this path in your content property in order for the Tailwind class checker to work properly and include the classes at runtime (after doing this, I no longer face the issue of class being removed on consecutive saves. Also, the classes were applied properly without saving .scss or .config file. So, the content value now becomes:

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

2. In our project, we are using Angular Material and its styles were in conflict with the styles of Tailwind. So for this reason, we need to turn on the important flag in our config. Final config looks like:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,ts,js}", "./index.html"],   // <-------
  theme: {},
  plugins: [],
  important: true // <-------
}

Pro tip: Don't forget to check the dist folder's generated style.css when you create your production build. Look for Tailwind classes are included because it's better to be safe than sorry!

I hope I could save someone's hours of headache... ;)

Answer 7

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>

Answer 8

This error is due to Tailwind not finding any classes to scan in what it 'thinks'. For, e.g: if you're running public/index.html file in a browser then follow the below steps.

1. We need to create tailwind.config.js file. This file contains tailwind configuration like on which file needs to apply css or theme etc.

2. To create a file hit a command on your terminal

   npx tailwindcss init

This command will create tailwind.config.js in your root folder. Now, we need to modify the configuration. We will tell tailwind which files need to apply tailwind css and theme etc. In our case we're running public/index.html. So configuration like as below

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

Here, I want to compile files that are present in a public folder and src folder. So I've added both of them.

Try now. Good Luck.!

Answer 9

That's because your Path directory in your tailwind.config.js is Incorrect.

for example, if you have an SRC folder, it should be like this :

  content: [
    './src/app/**/*.{html,js,jsx,ts,tsx}', // Include all JavaScript/TypeScript files in the pages directory
    './src/components/**/*.{html,js,jsx,ts,tsx}', // Include all JavaScript/TypeScript files in the components directory
  ],

Answer 10

For anyone still facing this issue, you can just past the below snippet into your tailwind.confg.js file.

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./**/*.{html,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Answer 11

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!

Answer 12

Check the files structure on the left side and run:

npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

The smart Tailwind CSS will scan the folder for file and it will be successful!

Answer 13

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.

Answer 14

I have also got the same error. Look at this configuration file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./Components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Make sure if you create a folder of Components in your root folder, it should be Components in your taiwind.config.js file.

Answer 15

I have tried a few things trying to get the styles to be applied with Tailwind CSS. I did eventually add the CDN script tag to my index which basically made the class styles pull through to the frontend.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
// CDN added which made everything work..is this a good approach?
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Answer 16

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.

Answer 17

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. :)

Answer 18

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.

Answer 19

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

Answer 20

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

Answer 21

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

Answer 22

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

Answer 23

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

Answer 24

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.

Answer 25

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

Answer 26

Just btw, when your content is bloated with a bunch of different file paths that have all the exact same pattern except for 1 folder like example:

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

You can put the folder names in one like this:

content: ['./src/(app|pages|components|hooks)/**/*.{js,ts,jsx,tsx}'],

Answer 27

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

Answer 28

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

Answer 29

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}',
  ],
  // ...
}

Answer 30

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.