Question 244232 in CSS Question posted in
Some basic documentation can be found here.

Using CSS calc() with TailwindCSS and JS variables

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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 ;)


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search