warning in terminal regarding utility classes not detected

This issue has been tracked since 2022-11-18.

Version

@nuxtjs/tailwindcss: v6.1.3
nuxt: v3.0.0

Reproduction Link

https://stackblitz.com/edit/nuxt-tailcss-utility-warn

Steps to reproduce

Install @nuxtjs/tailwindcss
run server

What is Expected?

Clean terminal running Nuxt server

What is actually happening?

There is a warning regarding missing utility classes.

 WARN                                                                                                         13:12:45


 WARN  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  warn - https://tailwindcss.com/docs/content-configuration

This happened on rc version of Nuxt 3 as well.

Although utility classes are working, So I do not know if it affects the classes generation or not, But I still considered opening an Issue just in case.

ilkerdurmaz wrote this answer on 2022-11-26

same here :(

luabraggion wrote this answer on 2022-12-06

this is happening because he is reading content in his tailwind.config files and did not find any classes.
do the following go to your app.vue and put an h1 class="text-red-500" and restart the service here the problem was that.

wilfredinni wrote this answer on 2022-12-13

Same issue here. Wanted to use Nuxt in a new project at work, but having many troubles with tailwind and typescript

PickleNik wrote this answer on 2022-12-29

same here, didn't happen at first tho, but then started happening %)
tried editing tailwind.config as per Tailwind Docs
no luck so far

EDIT: the reason it didn't happen at first is because I had used a utility class in app.vue, but then removed it so it gave me the warning.

PickleNik wrote this answer on 2022-12-29

this is happening because he is reading content in his tailwind.config files and did not find any classes. do the following go to your app.vue and put an h1 class="text-red-500" and restart the service here the problem was that.

This actually works, thanks, sorry for not reading first

damisparks wrote this answer on 2023-02-20

this is happening because he is reading content in his tailwind.config files and did not find any classes.
do the following go to your app.vue and put an h1 class="text-red-500" and restart the service here the problem was that.

@luabraggion Thank you for the solution. It solves the issue for me.

wrench1815 wrote this answer on 2023-02-25

I see no point in keeping this issue open since the problem is not even a problem. It's just a mistake in understanding what the message is about. Since it tree-shakes the classes used and ofcourse if none is used, it gives a warning.

PickleNik wrote this answer on 2023-02-25

just a bad confusing warning imo

Your Name

Your Comment

More Details About Repo

Owner Name	nuxt-modules
Repo Name	tailwindcss
Full Name	nuxt-modules/tailwindcss
Language	TypeScript
Created Date	2019-04-04
Updated Date	2023-03-29
Star Count	1285
Watcher Count	12
Fork Count	157
Issue Count	57

YOU MAY BE INTERESTED

Issue Title	Created Date	Updated Date