How to add tailwindcss to an exisitng project?

Question

So I´m working on an older react project (2-3 years) old for work. Ngl, that it´s kinda frustrating to not know all of these 5000 css classes and so I´ve come to the conclusion to use tailwind. The guy who worked on the project before me also used material ui and some other downloaded stylesheets. But since everything worked perfectly with the cdn link, that shouldn´t be a problem. The project structure looks as follows:

Project Structure

I´ve tried injecting he content object in the tw.config into index.html and

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

I´m also clueless on where to put my index.css. The @tailwind directives for the 3 layers also have a

"Unknown at rule @tailwind"

warning, but I don´t know if that´s actual usual, since that file doesn´t have any imports and only gets exported?

I followed the instructions in the docs using

npm install -D tailwindcss
npx tailwindcss init

It also is listed in my dev dependencies and was succesfulle installed in my node modules. So yeah... Sadly there is very rare content to find a solution... -> https://www.youtube.com/watch?v=oG6XPy1t1KA also didn´t really help me out.

I thought about the problem being the new tailwind v3 and the old project? If it matters, I´m currently using node v4.16.1 in the project.

Glad for any help I can get! Cheers!

Answer 1

The Unknown at rule @tailwind doesn't seem to matter as the app I'm working on has the same message but compiles on start, maybe you can try to inject public as in content with "./public/**/*.{whatever file types}", the other as I had a problem where none of the stylings applied in files in that folder didn't make a change.