Phoenix x Tailwind CSS build not generating classes

Published on

sanne Hello folks! I’m having a very strange issue and I’m just baffled… I have a component where I’m setting the background colour with and the colours don’t show up if a number is in the interpolated classname, but fine if the same class is applied directly. (These are Tailwind classes, and the colors are configured) ETA: when inspecting the one that doesn’t work, it does show that the class bg-csb-blue-400 got applied, it just doesn’t have a color 

 // works fine
 color = "blue"

 <div class="bg-csb-#{color}"></div>

 <div class="bg-csb-blue-400"></div>

 // doesn't work
 color = "blue-400"

 <div class="bg-csb-#{color}"></div>

sanne 24 hours ago (In the component file the color variable is properly put on the assigns, but i wanted to keep the example brief)

sanne 24 hours ago Hmm… I think it is really tailwind related? It works with csb-blue but not with csb-red even though that is configured. Could it be that the CSS gets compiled before those classnames are available, so the ones that do work get used elsewhere and thats why they work? I will continue :sleuth_or_spy::skin-tone-2: 

class = "bg-csb-red" # <- works
color = "red"
class = "bg-csb-#{color}" # <- doesn't work

sanne 23 hours ago hmm… that doesn’t seem right because I can find a usage of bg-csb-red elsewhere, but no usage of bg-csb-blue which seems opposite to what i expected. If anyone has encountered this before (or if I’m just approaching all of this entirely wrong) I’ll be delighted, but otherwise I’ll pick it back up tomorrow.

blakedietz 23 hours ago The problem here is that the color you’re defining dynamically isn’t being picked up by the tailwind build process. tailwind is only going to include classes in the build that match the given tailwind patterns. So you’ll either need to define the full tailwind color in the code or set the safelist property in your tailwind.config.js to always include the class pattern in your build output. (edited)

blakedietz 23 hours ago https://tailwindcss.com/docs/content-configuration#safelisting-classes

Tailwind CSSTailwind CSS Content Configuration - Tailwind CSS Configuring the content sources for your project. (414 kB) https://tailwindcss.com/docs/content-configuration#safelisting-classes

blakedietz 23 hours ago So more simply put you have two options: Include the full name of the tailwind class in your source files so they’re picked up by the build process Use the safelist configurations to always include classes that match the given pattern for dynamic values in your source code. Your files should include the full name of a class e.g. bg-rose-500 in order for that class to be included in the built css file or use the safelist configuration. tailwind doesn’t recognize “bg-rose-#{my_value}” for example and thus won’t output the associated class names in the built css unless you set a safelist configuration. (edited)

sanne 7 hours ago That makes sense! I figured it was something like that. Thank you for your help!