AwsmBuff•9mo ago

TailwindCSS: Class-Strings build with variables

Since TailwindCSS does not support classes with variables (like I used before with twind), how would you color 10 elements with a Tailwind class but the color is retrieved from a list? For example: dark:bg-${color}-200 but the color is different for every button. I would use much more classes like text-color etc. so it was the easiest to do it with a variable that changes with every element.

10 Replies

AwsmBuffOP•9mo ago

https://stackoverflow.com/a/77628664 Solutions like this are not really efficient for me since I would need to specifically type 40 classes (4 per button and 10 buttons in total) in my example.

Stack Overflow

Variables in classes don't work with tailwind css + react to change...

does anyone know why, when using Tailwind CSS in a class and attempting to use a state variable (in this case, I am using React), the color changes in the DOM, but nothing changes in the user inter...

fro.profesional•9mo ago

You’ll need to define the full color in the variable or add the list of classes to the tailwind config to always be added

Deno AI Helper•9mo ago

I wasn't able to find the answer to your question in the official Deno documentation. However, based on your message, it seems like you're trying to dynamically generate TailwindCSS class strings using template literals in JavaScript. While I can't provide a solution based on the Deno documentation, I can point out that using template literals to construct class names as you've shown is a common approach in JavaScript when you need to dynamically apply styles. If you're using a framework like React or Vue with Deno, you could iterate over your list of colors and apply the class names directly in your JSX or template. Here's a conceptual example in React-like pseudocode:

const colors = ['red', 'green', 'blue', 'yellow', ...]; // Your list of colors

const elements = colors.map((color, index) => (
  <button key={index} className={`dark:bg-${color}-200`}>
    Button {index + 1}
  </button>
));

const colors = ['red', 'green', 'blue', 'yellow', ...]; // Your list of colors

const elements = colors.map((color, index) => (
  <button key={index} className={`dark:bg-${color}-200`}>
    Button {index + 1}
  </button>
));

Please note that this advice is not based on the Deno documentation, and you should double-check the accuracy of this advice. Also, keep in mind that TailwindCSS might purge unused styles if it doesn't detect them in your templates, so ensure that you configure it correctly to include dynamic classes.

Helpful Links: Styling active links | Fresh docs Deno Docs Deno Docs Components | Fresh

fro.profesional•9mo ago

https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Content Configuration - Tailwind CSS

Configuring the content sources for your project.

fro.profesional•9mo ago

https://tailwindcss.com/docs/content-configuration#safelisting-classes

Content Configuration - Tailwind CSS

Configuring the content sources for your project.

AwsmBuffOP•9mo ago

I mean, yea, naming every class explicitly works but was the thing I tried to avoid since it would need me to write down 40 classes in an object. Thank you anyways for the examples. I guess I have to go with that approach then. :/

fro.profesional•9mo ago

Take a look into this https://tailwindcss.com/docs/content-configuration#using-regular-expressions

Content Configuration - Tailwind CSS

Configuring the content sources for your project.

AwsmBuffOP•9mo ago

I thought safelisting is disapproved and bloats the css-file? And I would still need to name every color and grading I wanted in a different file. Seeing that TailwindCSS includes the "container" class when mentioned even though it is never used also seems bothersome. Maybe I will change to a different CSS framework.

fro.profesional•9mo ago

You can still use twind If you are using fresh

AwsmBuffOP•9mo ago

But there hasn't been any work on Twind for 2 years now. Comparing it to newer frameworks it lacks a lot of features. 🤔