'Tailwind CSS classes is not working in my project?

Here is my HTML link https://play.tailwindcss.com/fbB4GCL0ht VS 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 vs code Terminal plz let me know what should I do. I have also added base components and utilities.

cssclasstailwind-css


Solution 1:[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

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

This corrected the issue for me.

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

Solution 2:[2]

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.

Solution 3:[3]

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.

Solution 4:[4]

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

Solution 5:[5]

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

Solution 6:[6]

Just add this to into global.css

@tailwind variants;

Solution 7:[7]

Config in file tailwind.config.js

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

Solution 8:[8]

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

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

Solution 9:[9]

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

Solution 10:[10]

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

Solution 11:[11]

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

Related Questions