Closed ryanott01 closed 1 week ago
Hey @ryanott01, this is a common issue folks run into when they are new to Tailwind. But Tailwind does not support dynamically constructed classes. See here:
https://tailwindcss.com/docs/content-configuration#dynamic-class-names
Think of it like this, Tailwind's config file content
denotes what files Tailwind should check throughout your project. It scans each file and looks for class names it's aware of - but they must be verbatim. Any class it recognizes gets appended to the generated stylesheet, which is then used to style your page.
Tailwind of course comes with it's own set of utility classes built in, so it's aware of those, you can extend Tailwind's utilities using the config, and of course through plugins (like Skeleton).
If you wish to do something like this, you'll need to create your data structure using whole class names. I handle this for our color palette previews like so:
Hope that helps!
Current Behavior
Above is a "ColorPalette" component it uses a some each loops to go through and list each color with the dynamic dark/light mode tags. The code applies the correct classes but the colors do not show up.
But,
if I add the shade statically inside of the component or in the page/layout the component is loaded in then it will load that color,
so for example if I added this line to my layout or page or ColorPalette component
It will then render the colors for [primary-600-400] and [bg-primary-300-700] inside of the color palette.
Expected Behavior
Running the code above I expected to generate a color palette that shows all the colors dynamically based on dark/light mode.
Steps To Reproduce
No response
Link to Reproduction / Stackblitz
No response
More Information
I am a jr. dev and this is my first time ever reporting an issue like this, ever.
Please let me know if I could have done anything better.