Utility classes not found warning on build

[col-bc]

I am having trouble building the css with the CLI tool. I get a warning when building the css about the content option in tailwind.config.js. The build results in a very bare css file without the base, components, or utilities classes.

$ npx tailwindcss -i ./src/tailwind-in.css -o ./src/assets/global.css

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 227ms.

I have a suspicion that the config file or npx command are having problems finding my css file with the @tailwind ... directives. When I change content to content: ["./**/*.{html,js}"], (without the leading ./src), tailwind compiles without the warning and produces a much larger output file. However, I get the following runtime error:

File structure:

├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── global.css
│   │   ├── logo.png
│   │   └── tailwind.css
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.ts
│   ├── router
│   │   └── index.ts
│   ├── shims-vue.d.ts
│   ├── store
│   │   └── index.ts
│   ├── tailwind-in.css
│   └── views
│       ├── About.vue
│       └── Home.vue
├── tailwind.config.js
└── tsconfig.json

tailwindcss.config.js

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

./src/tailwind-in.css

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

I am very lost. I'd appreciate any assistance available.

Edit
Added leading slash to content in tailwindcss.config.js content to match the code causing this issue.

[adamwathan]

Hey! Your content path is wrong, you’re missing a slash:

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

[col-bc]

My mistake, that was a typo on this discussion. My config includes the leading slash.

[col-bc]

I was able to resolve the problem. Here is the working code.

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

[col-bc]

After using tailwind in a few more projects, I have discovered that this surfaces frequently when using vue-router and the solution does not work without explicitly listing the views directory.

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

I have also found that I can put the @tailwind directives directly into my App.vue file. This eliminates a file and import, making it slightly easier for me to manage.

// App.vue
<template>
  <router-view />
</template>

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
</style>

[angelhdzdev]

After using tailwind in a few more projects, I have discovered that this surfaces frequently when using vue-router and the solution does not work without explicitly listing the views directory.

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

I have also found that I can put the @tailwind directives directly into my App.vue file. This eliminates a file and import, making it slightly easier for me to manage.

// App.vue
<template>
  <router-view />
</template>

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
</style>

Solved

Thank you. Thank you. Thank you! Finally solved it.
And I will try to tell many people about this so they don't have to struggle like I did.

For me, it was happening exactly what the warning was saying I wasn't using any utility classes, because in my specific case, I'm building a video Tutorial for YouTube step-by-step to help people install TailwindCSS in a Vite/Vue 3/TypeScript project.

So I was at a step where I wasn't adding any utility classes yet, so obviously it will warn me!

And the reason I didn't get this warning the first time I tried Tailwind is because I did added an utility class!

The moment I added text-blue-500 on a <h1>, the warn went away!!!

Wishing you health, joy and success!

[col-bc]

@angelhdzmultimedia, happy to help. Also check out this vue cli plugin for an even easier setup. Your viewers may appreciate it :)

[Aitizazhassan]

I was able to resolve the problem. Here is the working code.

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

This solution work for me thanks

[funylon]

In my case it was a relative path issue.

I'm working under the webserver's docroot htdocs/myproject.

In the twcli docs example src/index.html:

needed to be

Now the right dist/output.css is used for:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

[akashpathak9587]

this error is just because of
content: [
],
instead do this
content: ["./src/**/*.{html,js}"],

And classes get automatically added in output file as soon as you will use them in html file.
Just follow the installation setp as on the telwind website https://tailwindcss.com/docs/installation

[mxvsh]

I tried all the above, but none worked. I had to use path in the tailwind.config.js file to make it work.

const { join } = require('path');

module.exports = {
  content: [join(__dirname, 'src/**/*.{js,ts,jsx,tsx}')],
  theme: {
    extend: {},
  },
  plugins: [],
};

[nestorbfgo]

i don´t know why but it's working, thx!

[ssadek-coder]

Spent hours on this issue and this is the only solution that worked. Thank you!

[Gauravkumario]

thank you bro for solution

[luchillo17]

This seem to happen a lot with monorepos like Nx where the root of the repo is not the root of the project/app, I also had to path join the dirname of the project.

import tailwind from '@astrojs/tailwind';
import { defineConfig } from 'astro/config';
import { join } from 'node:path';

// https://astro.build/config
export default defineConfig({
  outDir: '../../dist/apps/portfolio',
  integrations: [
    tailwind({
      configFile: join(import.meta.dirname, './tailwind.config.mjs'),
    }),
  ],
});

[luchillo17]

And had to do the same for the taiwind.config.mjs:

import { join } from 'node:path';

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    join(__dirname, './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

[Milleruriol]

The content section of your tailwind.config.js file is where you configure the paths to all of your HTML templates, JavaScript components, and any other source files that contain Tailwind class names.

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

[Voyager-Two]

Mine is only broken in production NODE_ENV=production, while using Next.js + Docker + DigitalOcean app platform.
I can't seem to find a fix for it. I've tried it with tailwindcss package as non-dev dependency.

I wonder if it's related to Next.js cache folder somehow. As when I update tailwind.config.js, I have to clear Next.js cache.
Also for some reason, it seems to only detect tailwind content inside postcss.config.js, instead of tailwind.config.js.

Edit: it was because I had an unusual setup with Next.js being served through Nest.js

[webianasan]

Make sure, you place both the index.html and input.css file in the src file as instructed in the installation guidelines.
I made this mistake of keeping the two files in two different folder and my project didn't work. After fixing that it is working.

[Jessica-Ryan]

This works

[Jessica-Ryan]

Only issue is that vite can't find html file...? Get error: This localhost page can’t be found

[Ran-sy]

add /src/index.html

[santoshdhonde]

Yes, It's works, I have also same problem, used wrong path for index.html

[aifodu]

In my case, I has everything setup but had not used any tailwind class. I tried the aforementioned with no success. But once I used a tailwind class, all was well.

[Selikeh]

The solution is actually quite simple. Your content paths should point to your HTML files that make use of the tailwind utility classes. You could either move your HTML files to the src folder or add paths to your HTML files in the content section like so:

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

The second path in the content section above points to HTML and JS files in the main parent folder. Also, your HTML file should contain some utility classes otherwise the error would persist, so throw some utility classes into your HTML to prevent the error from occurring. Don't forget to link your output CSS file to the HTML file.

[ab1820]

This worked for me! as of January 2022. So anyone having issues with the config file and styles not working, use this! Thanks @Selikeh

[ManfredHu]

maybe document should be update https://tailwindcss.com/docs/guides/vite#vue 🤣

[n4j1Br4ch1D]

In my case I had my project in sub directories I solved like this:

//tailwind.config.js

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

// package.json

  "scripts": {
    "tailwindcss": "cd test/demo && npx tailwindcss -i ./src/css/input.css -o ./src/build/output.css --watch",
  },

cd test/demo && npx tailwindcss -i ./src/css/input.css -o ./src/css/output.css --watch

[PANxxj]

None of above was working in my project so i Try this and it worked
/** @type {import('tailwindcss').Config} /
export default {
content: [
"./index.html",
"./src/**/.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

[MrDBC]

I'm working on a nextjs project( I'm new to it)
and it has no index.html file

I don't have a src folder,
the pages folder is there,

/** @type {import('tailwindcss').Config} */

const { join } = require('path');

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

attaching folder/file structure

what is the solution for that?

Edit: sorry guys, the problem was in the globals.css file:

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

.root{
    @apply h-full bg-black;
}

.body{
    @apply h-full bg-black;
}

instead of :

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

:root{
    @apply h-full bg-black; 
}

body{
    @apply h-full bg-black;
}

LOL

[BESSETTY-AKHIL]

If there are no Tailwind utility classes in your files, Tailwind will generate this warning. Add some basic utility classes to test:
apply this code to the (App.tsx)

const App: React.FC = () => {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <h1 className="text-3xl font-bold text-blue-500">Hello, Tailwind!</h1>
    </div>
  );
};

export default App;