Why do Tailwind classes change both, the target CSS property and the associated tw-variable?

[Qjo1]

Hi Tailwind team,

I noticed when looking at some of Tailwind's class definitions (v4.3), that they often define the same value twice, once on the relevant CSS property and once on an associated "tw"-variable and I am curious about why that is.

In cases like this, it makes some sense (although it could arguably be shortened into one line):

.translate-x-2 {
    --tw-translate-x: calc(var(--spacing) * 2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
}

But there are also many cases like this, where the variable doesn't seem to do anything:

.duration-100 {
    --tw-duration: 100ms;
    transition-duration: 100ms;
}

Now maybe before that you would use a more general class like this one, that defines the transition as:

.transition-all {
    ...
    transition-duration: var(--tw-duration, var(--default-transition-duration) );
}

But at the end of the day, the .duration-100 class here will overwrite the duration property set in the .transition-all class. So what is the reason for changing the tw-variables inside the utility classes? Is it for backwards compatibility or is there some other use for these variables that I am not seeing? I have not seen this mentioned in the docs.

[wongjn]

It's useful if you're using utilities with variants. So with the transition and duration example, say we have this:

<div class="duration-100 transition-colors data-foo:transition-all">

Without the CSS variable:

.transition-colors {
    …
    transition-duration: var(--default-transition-duration);
}

.duration-100 {
  transition-duration: 100ms;
}

.data-foo\:transition-all[data-foo] {
  …
  transition-duration:  var(--default-transition-duration);
}

So when the data-foo attribute is added to the element, the transition-duration would be overridden. So you'd need repeat the duration utility with the matching variant:

<div class="duration-100 transition-colors data-foo:transition-all data-foo:duration-100">

However, with the actual set up with CSS variables:

.transition-colors {
    …
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.duration-100 {
  --tw-duration: 100ms;
  transition-duration: 100ms;
}

.data-foo\:transition-all[data-foo] {
  …
  transition-duration:  var(--tw-duration, var(--default-transition-duration);
}

The --tw-duration is preserved and used even when the data-foo attribute is added to the element.

[Qjo1]

Oh I see, that answers it, thank you.

I will close the discussion then.