Level 104
Tailwind config allows you to define a safelist
https://tailwindcss.com/docs/content-configuration#safelisting-classes
2 likes
Mar 15, 2022
9
Level 6
Tailwind Colors Dynamically
<div class="flex px-3 rounded-full p-1 {{$bg_colour}} {{ $text_colour}} text-xs md:text-sm">
{{ $status->name }}
</div>
//the line below shouldn't have to be here, but is required if I want Tailwind to recognize bg-yellow-200
<div class="hidden bg-yellow-200 text-yellow-800">
The above is code in my component blade file. There used to be a time when using Tailwind where all I had to do is put text-yellow-200 in a class and automatically the text would be yellow 200. Now days I must use npm run dev each time I want to see the new styling. I'm unclear on how that's a benefit, but that is reality.
The problem comes into play when I want to dynamically call a colour based on a status value - which Tailwind can't display. What is the best practice for doing this with Tailwind without having to include some sacrificial hidden div to explicitly call bg-yellow-200 so that the compiler knows to include that in the rendering?
Thanks in advance.
Level 27
The benefit of doing it the ‘new way’ is that the output CSS files are much smaller since only a small fraction of the entire reservoir of Tailwind styles are included.
The downside is that, due to how class detection works, it won’t pick up dynamic style names. The official recommendation is ‘don’t use dynamic style names’. If the list of styles that may be represented by variables is reasonably small, you can safelist them as @tykus suggests. Or if your dynamic styles are predictable (e.g., determined by something like a theme which can be gleaned from the body element’s classes), you can use custom class styles and employ CSS variables to get the same effect.
P.S.: You don’t need to run npm run dev every time you want to see updated styling; just run npm run watch once and it will automatically update your assets on each save while your session lasts.
1 like
Level 6
@kokoshneta yes I do use the watch piece occasionally. I find myself requiring command line use so often that I find exiting out of the watch mode more of a paint than hitting that compiler manually each time I change.
Level 27
@unohuim Can’t you just have multiple command lines open? I generally use the command line in VSCode, which allows me to have two command line tabs open at the same time – one for the watch command and one for general commands.
1 like
Level 6
@kokoshneta thnx.. I'll try it out
Level 102
If you want to safelist a complete set of classes, you can use regex. It allows you to automatically include a bunch. Just be aware that your bundle size will grow. https://tailwindcss.com/docs/content-configuration#using-regular-expressions
1 like
Level 6
thanks so much, guys. Don't know how I missed the safelist!
I LOVE the idea of a smaller css file in production, but in development I want every class available to me. Obviously, I'm in the minority. Cheers!
Level 27
@unohuim The trouble with that is that it introduces differences between development and production, which can lead to hard-to-debug errors.
1 like
Level 6
@kokoshneta I appreciate that, actually. Once I moved that over to production, I would have not gotten any errors but those classes would not have been recognized anymore and thus debug nightmare. Good point.
1 like
Please or to participate in this conversation.