1

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 class="text-white">

after:


// ✅ here what I get
<div class="text-white hover:bg-blue-500">

// here what maybe the guy think it will happen
// or I don't know what bug he talking about
<div class="text-white ${pseudo}:${className}">

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)

stackdeveloper
  • 352
  • 2
  • 21
  • Are you using Tailwind CDN or package? Basically what Tailwind setup do you have? – Ihar Aliakseyenka Sep 08 '22 at 15:19
  • @IharAliakseyenka for now CDN is only for testing, in the future I will use also the package. I asked so I can know if the script isn't that great. and turn out that isn't that good – stackdeveloper Sep 08 '22 at 19:46
  • 1
    script will work with CDN, but not with package (this was covered in accepted answer). Tailwind itself does not recommend to use CDN on production - check your browser console you'll see the warning. However it's up to you do you want to use it or not (I personally never use it). And don't worry about using small JS helper - TailwindCDN itself is a 100kb script. – Ihar Aliakseyenka Sep 09 '22 at 09:20
  • @IharAliakseyenka thanks since I not building for now in production but only learning. I think the script works fine. in the future, in more important projects I will the alternative npm. thanks a lot! – stackdeveloper Sep 09 '22 at 10:05

1 Answers1

3

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.

Konrad
  • 21,590
  • 4
  • 28
  • 64
  • thanks, so in my case It will work or not? because in the docs they are showing frameworks where you can add explicitly {}, but I think using classList technically not should give any problem (if tailwind try to see the html file codebase) – stackdeveloper Sep 07 '22 at 20:05
  • I am wrong or not, because it seems not logic that ${} at the end became a string added to a class and it not show dollar and brackets. sorry for my confusions. I will upvote of course – stackdeveloper Sep 07 '22 at 20:06
  • Tailwind scans your code before it even compiles. But modifiers like `hover` are probably added in a different way so it should probably work. I will do more research. – Konrad Sep 07 '22 at 20:08
  • 1
    ah, ok thanks. after the PS. I understand. is something on compile time, now I understand – stackdeveloper Sep 07 '22 at 20:09
  • 2
    Having a whitelist file that you can add classes that you will be trying to dynamically add is a pretty good solution to getting any extra classes that your trying to include to be compiled – JDawwgy Sep 07 '22 at 20:18
  • I testes thing around and using for example `hover:text-red-500` generates code like `hover\:text-red-500:hover { /* */ }`. So using template string like `${pseudo}:${className}` doesn't seem to work well. – Konrad Sep 07 '22 at 20:27
  • @JDawwgy is pretty good I think but I think I will use the default way `hover:class` – stackdeveloper Sep 08 '22 at 19:48