6

I am trying to setup tailwind 3 , but i got the next 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 is my project structure

|_public : 
 |_index.html , 
 |_output.css  // this css file generated after i run the command | npx tailwindcss -i ./src/input.css -o ./public/output.css --watch
|_src
 |_input.css

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],

  theme: {
    extend: {},
  },
  plugins: [],
}
krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88
Anas Hafidi
  • 349
  • 1
  • 5
  • 15

4 Answers4

4

According to your code, your html files are in the src folder (and sub-folders)

  • Put your html files in the public folder and properly link it with output.css
  • Then run npx tailwindcss -i ./src/input.css -o ./public/output.css --watch

You can also clone the Tailwind boilerplate I made using

git clone https://github.com/abrahamebij/tailwind-boilerplate

Then npm install and npm run css

abrahamebij
  • 143
  • 1
  • 8
2

Why does this error occur ?

When specified content path in the tailwind.config.css doesn't have any html/js file

OR

if you are not using tailwind-css classes in your html file

module.exports = {
  content: ["./src/**/*.{html,js}"],  Your html and js files which is users of tailwind classes
  theme: {
    extend: {},
  },
  plugins: [],
};

This states I want to use the tailwind classes for html/js files under src directory. But src doesn't have any html/js file.

Solution:

  1. Change content in tailwind.config.css to have right path
  2. Have html/js files in the specified directory.

Extra : Proper approach to follow when using Tailwind-CLI

1. Know about your file structure. Use:

public
|_ tailwind_base.css 
    File from which the output.css is produced
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
|_ output.css
src
|_ index.html   
   Link with the output.css using 
    <link href="../public/output.css" rel="stylesheet" />

Watch it as

npx tailwindcss -i ./public/tailwind_base.css -o ./public/output.css --watch

Specify your html/js in tailwind.config.js

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

index.html file

<html lang="en">
  <head>
    <link href="../public/output.css" rel="stylesheet" />
  </head>
  <body class="text-8xl">
    Hello
  </body>
</html>

Use tailwindcss classes happily in your index.html file

krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88
1

This is worked for me. in tailwind.config.js, change your folder name "src" to "public" or you need to put your files to "src" folder

ashmakov
  • 26
  • 5
0

content: ["./src/ **/.{html,js}","./public/ **/.{html,js}"], You have to include all folders with html and js files

Ana
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 27 '23 at 15:11