2

I make a vue project using this documentation: https://vuejs.org/guide/quick-start.html#creating-a-vue-application

And I wanted to added tailwind css to this project. So I used this guide (from point 2 Install Tailwind CSS): https://tailwindcss.com/docs/guides/vite#vue

But, I see no changes and get this warning:

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

I followed the instuction as it is. I tried following the content-configuration and I double checked it to see all files in place.

I was expecting tailwind.config.cjs file should be generated but instead tailwind.config.js is generated.

Updates: On repeating all the steps using this link: https://tailwindcss.com/docs/guides/vite#vue

At step 4: Add the Tailwind directives to your CSS, When I replace the content for style.css as asked in the step.. Exactly after this point, the error is shown.

Improve this question
7
  • Does this answer your question? Tailwind CSS classes is not working in my project? Commented Oct 26, 2022 at 13:49
  • @ericmp - No, I have looked into this. And I understand the reason, but I don't think that is the case for me. Commented Oct 26, 2022 at 13:55
  • 1
    Please be sure of it and share more context. Commented Oct 26, 2022 at 14:09
  • @YashMadhwal maybe you should consider start from 0 and install it this way - tailwindcss.com/docs/guides/vite#vue (the link you shared). It's pretty quick, and you'll have vue3 + tailwind + vite Commented Oct 26, 2022 at 14:11
  • @ericmp pretty much what OP did already. Commented Oct 26, 2022 at 14:13

2 Answers 2

Reset to default
1

Fixed.. Asking in the discord community this was the response:

Thank you for supplying a remotely-hosted repository. It seems to work fine for me, it could be that you're suffering from a bug that this PR solves: https://github.com/tailwindlabs/tailwindcss/pull/9650. You could temporarily try insiders version and see if that fixes it for you npm install tailwindcss@insiders

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

I just gave solution to the same problem. You might have the same...

I had my tailwind.config.js like this:

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

},

...and I changed the destination folder from "src" to "public", and it worked for me.

Like this:

module.exports = { content: ["./public/**/*.{html,js}"],

},

Hope this will help you. Good luck and happy coding !

Improve this answer

4 Comments

Why do you have your files in public? Quite strange.
Well, it wasn't working and I searched for some solutions, I saw this one and I thought it make sense , cause my html, css and js files are in this folder Public.
They should be in assets for bundle optimisations tbh. Got none of those in public, so you're shipping unoptimized assets to your clients.
So you are telling me I must replace my folder "src" into this "assets" folder ? Or create a new folder in my project called "assets"? My folder "src" is where I created my first CSS file , and I built it after instalation from "src" folder to "public" folder. This is why I am using 'public" folder, because the css file inside has all the tailwind cool stuff, plus my html and my JS file. I'm not really a pro...not yet ;) Thanks for your comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.