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.
A
AwsmBuff46d 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...
F
fro.profesional46d 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
DAH
Deno AI Helper46d 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.
F
fro.profesional46d ago
F
fro.profesional46d ago
A
AwsmBuff45d 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. :/
F
fro.profesional45d ago
A
AwsmBuff45d 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.
F
fro.profesional45d ago
You can still use twind If you are using fresh
A
AwsmBuff44d 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. 🤔
More Posts
Import path autocomplete doesn't workHi 👋 It behaves like it's just a string and not an import path. I have the latest version of Deno aDeno: How to import npm scoped packages with @ in deno?I am trying to import @whiskeysockets/baileys in deno like this: import * as a from "npm:@whiskeysoTo avoide tariling slash in URL on deno deployWe have used deno deploy to build website done using Astro frame work (Astrowind Theme)in productioImporting internal modulesI would like to use https://github.com/denoland/deno/blob/main/ext/console/01_console.js in my code,Strange error after lint in github actionsfor a some reason after: ```yml - name: Run linter run: deno lint ``` I get error that saysHow to encrypt and decrypt files from S3 without loading the hole content into memory?How to encrypt and decrypt files from S3 without loading the hole content into memory? I have this Worksapces / Monorepo supportDeno does not currently have the capability to resolve `workspace:^` references and this breaks any Deno Oak : Can't connect to SSE with Deno DeployHello, I'm trying to deploy an app who use Server Sent Events. The goal is to keep in memory differeError connecting to mongoose when using deno cli**deno-x86_64-pc-windows-msvc v1.41.1** Testing the following code using `nodejs` and on `deno deplHow to debug deno on Visual Studio? (Not VSCode)Is it possible to debug deno on Visual Studio? (not vscode) I only know how to debug it using windoHow to polyfill node imports when bundling with the deno version of esbuild?Hello, I am trying to run esbuild using https://deno.land/x/esbuild to bundle a Deno project into aforward stream response from openapi to frontendforward stream openapi by using deno backend as a middleware, how to receive and send stream to fronShould deno install work with jsr?What am I doing wrong? When I try to install a CLI from jsr.io and then use it, I get an error messaImport-IntelliSense with Fresh and VSCode doesn't work as expectedHey. I'm fairly new to Deno and Fresh so I assume I'm simply missing something. I've created a FreshHow to rewrite this code so I don't have to force deno to stop linting?```ts import { parse } from "https://deno.land/std@0.218.2/toml/mod.ts"; import { match } from "npm:Deno compile optimizationHi Everyone, I'm building a CLI tool with Deno and I was wondering - if there are any optimizationIs there a way to select Partial Mode on button?I researched and I do not think it is possible, but it would be nice to do something like: ```<a f-pHow to Restart Server ManuallyI run Hono framework with Deno. I run the server using task script `deno run -A --watch ./server/maiIs there any reference manual for how doc comments are rendered on JSR or deno.land/x?I guessed it's just TSDoc, but it turns out that it's not exactly TSDoc (e.g., `@link` to an instancHow to start using data validation in kv?Hey fellows! I want to dive into data validation. Any experience or suggestions? Feel free to post