Level 75
Are you using vite correctly?
Edit
Just tried in my project:
<div class="text-red-400">
text
</div>
And working fine, so maybe make sure tailwind is loaded. Test with their CDN.
1 like
Jun 27, 2024
2
Level 1
Tailwind not all text styles applying
I'm going through the Laravel bootcamp to learn by building a sample application, and I noticed that I can't get tailwind to apply some of the css styles for text such as text colour.
I've tried quite a few colours, making sure they're on the list from the tailwind website, and auto-completing in my editor e.g.,
<div class="text-red-400">
text
</div>
The following quickdoc shows for text-red-400
--tw-text-opacity: 1; color: rgb(248 113 113 / var(--tw-text-opacity));
The page is reloading the new html correctly with the text-red-400 class applied to the div, but it does not apply the css color property.
I can apply the color property manually like so
<div style="color:rgb(153,27,27)">
but manually writing styles like this defeats the purpose of using tailwind.
According to the tailwind website the entire colour palette should be available by default but this doesn't seem to be true in my case. I'd appreciate some assistance in utilizing tailwind correctly.
Thanks
Level 1
@jlrdw You may be on to something with vite.
I wasn't running it given that I'm working on a remote web host, not a local one. However, it looks like I may need to keep it running to have it recompile the CSS regardless. There are a lot of layers in this framework and I'm not sure how they all work.
When vite is not running, a lot of the tailwind css works, such as positioning, margins, font size and weight, but not all of it like colours.
When vite is running, none of the tailwind css works.
I ran npm run build which recompiled everything and now the colour is working too, which hopefully is good enough. It doesn't seem right that running vite breaks all the css though.
It is quite annoying to have to rebuild every time I use a different class.
Please or to participate in this conversation.