Tailwind isn't working on React project
Im doing a project using React and Tailwind, and at the moment that im styling a component the only classname that works is bg-red-500, can anyone help me? I tried using any other color like bg-blue-500 and that's not working
Solution:Jump to solution
That's probably part of the problem, try rerunning
npx tailwindcss init -p to get the postcss.config.js file16 Replies
Are you using Vite as your build tool or NextJS?
vite
Ah ok. Could I see your
vite.config.ts file?it's the default file
Ah that makes sense. I'm guessing you followed this link? https://tailwindcss.com/docs/guides/vite
Install Tailwind CSS with Vite - Tailwind CSS
Setting up Tailwind CSS in a Vite project.
Yes, I installed Vite first and then Tailwind, following this link
I'm not entirely sure what the problem is then. Could you possibly try importing the
index.css file into App.tsx?Yes, I've tried this already, but I renamed the index.css default file to input.css, even the className="flex flex-row" isn't working:
Do you have a
postcss.config.js file in your project?No
Solution
That's probably part of the problem, try rerunning
npx tailwindcss init -p to get the postcss.config.js fileThanks a lot! That worked
Oh beautiful, glad I could help. Just for giggles, could you try renaming
input.css back to index.css and removing the import? I think Vite will recognize index.css and apply it automatically
Also be sure to mark one of the dm's as the answer for indexingI've tried to rename the input.css back to index.css, and that's still ok, but i need to have the import at main.tsx, if not, then it doesn't work anymore
Really appreciate your help!
Ah, that's where the import is. Good to know, sorry for misleading lol
Yeah happy to!