is real that Tailwind if you add a string with ${class} it won't work?-CodePudding

I asked a while ago about the tailwindCSS TailwindCSS - is there a way to not write multiple times the same prefix? like `hover:` for example

and someone correctly solved the problem but with javascript (for now it seems to work perfectly fine)

but someone in the comment said that using `${className}` is bad.

the line that he talking about is this

element.classList.add(`${pseudo}:${className}`);

// sample output: "hover:bg-blue-500"

at this point, I don't know if is right or not, because at the end of the day in dev tools it will only add a string.

so js will auto-translate it to browser-friendly code.

before:

<div >

after:


// ✅ here what I get
<div >

// here what maybe the guy think it will happen
// or I don't know what bug he talking about
<div >

like you see the browser it correctly adds it.

so I don't get where is wrong the script, so I will correct it because having bugs in the future.

currently I am using html,css only. maybe the bug will happen only on react and framework where you can't do classList.add() but directly write the class in the return?

I don't know , if someone is experienced and know the bug he talking about tell me.

(and if is something I don't need to worry about, tell me also so I will use it everywhere in the projects)

CodePudding user response：

Here we can read that

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

So, yes, it just creates a string that is used for classes, but that's not the case.

Tailwind generates CSS file with all classes that you actually use in your codebase. If you will use a template string it will not find the classes and they will not be present in the final CSS file.

Tailwind isn't including all of the classes by default to reduce the file size.

P.S.

The worst thing about using template strings is that it can look as if it was working because you included the class somewhere else in your code.