Using CSS calc() with TailwindCSS and JS variables

Question

In a sentence: Why does calculations with JS variables does not apply any style using TailwindCSS v3?

I am using VueJS for my project, and this example works as expected as it simply applies calc as string:

...
<div class="w-[calc((100%-12rem)*2/3)]">
...

While this doesn't (there are JS variables involved):

...
<div :class="`w-[calc(${props.languages.length * 1.25 + 3}rem)]`">
...

When I inspect the console, I can see HTML with the correct class:

...
<div class="flex w-[calc(14.25rem)]"
...

... but styles are not applied. Any ideas? What am I doing wrong? I think this is a very powerful feature as it lets you dynamically style your HTML based on underlying data, but I can't make it work although I think am so close.

Thanks in advance.

I'm not sure, but if you're doing the calculation in JavaScript wouldn't it be "easier" to simply use class=`flex w-[${calculation-result}]`, leading to - from your example - class=`flex w-[14.25rem]`(edited after checking the docs). — David Thomas
– David Thomas, Commented Sep 4, 2023 at 11:39
Thanks @DavidThomas, I am using VueJS and have to prepend : to the class attribute for Vue to consider it as a "JS string". But I am basically doing what you suggest. — andcl
– andcl, Commented Sep 4, 2023 at 11:49
Fair enough, I admit that I didn't even notice the prepended : character; given your comment I'm rather glad that I didn't, since I'd probably have raised that as an issue (not knowing that Vue was in use). I have added the vue.js to the question so others are more aware, feel free to edit it back out though. — David Thomas
– David Thomas, Commented Sep 4, 2023 at 11:51
Yes, just wrote an answer with my own research and results. Thanks anyway! — andcl
– andcl, Commented Sep 4, 2023 at 12:20

doğukan · Accepted Answer · 2023-09-04 12:12:10Z

7

Do this instead:

<script src="https://cdn.tailwindcss.com"></script>

<div id="el" class="w-[calc(var(--languages-length)_*_1.25rem_+_3rem)] h-10 bg-red-300"></div>

<script>
el.style.setProperty('--languages-length', 6);
</script>

Equivalent in Vue:

<div 
 class="w-[calc(var(--languages-length)_*_1.25rem_+_3rem)] h-10 bg-red-300" 
 :style="{ '--languages-length': props.languages.length }"
></div>

answered Sep 4, 2023 at 12:12

doğukan

28k15 gold badges67 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

andcl · Accepted Answer · 2023-09-04 12:14:17Z

4

I finally found the cause: Tailwind's JIT, which is enabled and working by default in TailwindCSS v3.

Here is the interesting part: they say not to construct class names dynamically, which is precisely what I was trying to do.

So I finally followed their recommendation (see this very useful v2 docs link) and bypassed Tailwind for one time, directly using a style attribute to set the width of my element like this:

<div :style="`width: ${props.languages.length * 1.25 + 3}rem;`">

Thanks anyway ;)

answered Sep 4, 2023 at 12:14

andcl

3,5588 gold badges40 silver badges68 bronze badges

2 Comments

rozsazoltan Over a year ago

@dogukan's answer is much better. It builds a dynamic class, but it uses CSS variables, so the Tailwind CSS compiled code will reference the CSS variable. You can also manipulate the CSS variable at runtime with JavaScript, and the class will not change.

rozsazoltan Over a year ago

However, what you've shared is useful. The problem with dynamically declared class names using JS variables is that, during native CSS compilation, the variable's value is unknown, which can be practically anything. Therefore, using JS variables in dynamic class names, as you mentioned, is incorrect and should not be followed. Great research work!

Collectives™ on Stack Overflow

Using CSS calc() with TailwindCSS and JS variables

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related