Login/Register
No utility classes were detected in your source files ,double-check the `content`
Asked Answered
Solved tailwind-csstailwind-ui
A

8

9

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: [],
}
Alainealair answered 19/6, 2022 at 20:20 Comment(1)
According to your config, html and js files should be in src directory – Telekinesis
N
5

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

Neighbor answered 20/6, 2022 at 8:2 Comment(0)
D
6

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 😇

Dissidence answered 4/1, 2023 at 3:8 Comment(0)
N
5

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

Neighbor answered 20/6, 2022 at 8:2 Comment(0)
E
3

This warning is actually self-explanatory. Got it after clearing the default markup from a newly bootstrapped nextjs template. The warning means no Tailwind classes were detected in your entire project, at least if you're working with react.

Simply add any Tailwind class to your project and the warning will go away.

export default function Page() {
  return (
    <div className="bg-red-600">Hello World</h1>
  )
}
Ethel answered 14/12, 2023 at 15:38 Comment(0)
G
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

Garofalo answered 24/8, 2022 at 5:48 Comment(0)
K
0

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

Kind answered 23/7, 2023 at 18:59 Comment(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. – Enrol
H
0

Check this files structure

files structure

Add this to package.json

    "scripts": {
        "build-css": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
    },

Or try this command : npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Haydenhaydn answered 30/11, 2023 at 4:53 Comment(0)
S
0

Try this in the content of tailwind.config.js:

content: ["./src/\*.{html,js}", "./public/*.{html,js,jsx}"]
Sg answered 25/4 at 19:46 Comment(0)
A
0

i had a similiar warning when compiling an angular 18 app. for me my styles from tailwind all stopped working. what fixed it for me was deleting my .angular/cache and then restarting ng serve

cd into project root directory

rm -rf .angular

ng serve
Acanthus answered 14/6 at 22:21 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.