any reason why transition property is not atomic?

[herzaso]

When using transition-all for example, I get the following:

transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

But then, if I use transition-all duration-1000 ease-in I might not get the results I expect (since the duration and timing-function are defined twice).

Any reason transition-all is not just setting the property?

[wongjn]

Any reason transition-all is not just setting the property?

I assume so that it lets you only need to add transition-all class to have transitions play.

But then, if I use transition-all duration-1000 ease-in I might not get the results I expect (since the duration and timing-function are defined twice).

What differences do you get that is not to your expectations?

[herzaso]

I sometimes don't get the duration or timing function that I specify (I get the one defined in the transition-all)

…

On Sun, Jun 30, 2024, 10:16 Justin Wong ***@***.***> wrote: Any reason transition-all is not just setting the property? I assume so that it lets you only need to add transition-all class to have transitions play. But then, if I use transition-all duration-1000 ease-in I might not get the results I expect (since the duration and timing-function are defined twice). What differences do you get that is not to your expectations? — Reply to this email directly, view it on GitHub <#13924 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAZSBASAP7Y3L3AM5LB3DTLZJ6WDHAVCNFSM6AAAAABKD3E3JOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TSMJVGM3TS> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

[wongjn]

Consider checking:

• Tailwind has compiled since you added the class(es).
• The content file globs sufficiently cover the file that the duration-* or ease-* appears in.
• String concatenation/interpolation is not used to build the class names.
• The browser is requesting the most up-to-date version of the CSS file.

Otherwise, consider providing a project that reproduces the unexpected behavior.

[herzaso]

you are right. The current problem I have stems from a different issue - in my configuration I use important for all classes, this causes transition-all to apply the duration as important as well.
Now, in a certain scenario, I want to apply a different duration, but since the duration is dynamic (I get it as a prop), I can't use tailwind for that, so I apply it with style but then, in style you can't define important (React).
While there is a workaround for that using ref, I still think that it's strange and unexpected that transition-all sets the duration and timing function. I can understand truncate since it's an addition (and not a replacement), but in this case, I don't have any option to set just the property...

[wongjn]

You could consider using an arbitrary property class like [transition-property:all].

[herzaso]

I guess I can work around that issue, but IMO it's still unexpected.
Anyways, thanks for taking the time to answer my question

[adamwathan]

Like @wongjn mentioned, we do this so you can add a transition with a single utility instead of always having to add three classes, and let you override the timing function and duration with other utilities as necessary.

There are a number of utilities in Tailwind that do this sort of thing, for example font size utilities like text-xl also set a line-height value, and the border utility effectively sets a border-style and a border-width so you don't have to write border border-solid to get a border.

Two options for your particular situation:

1. Remove the defaults for transition-timing-function and transition-duration in your theme:

   /** @type {import('tailwindcss').Config} */
   export default {
     theme: {
       extend: {
         transitionTimingFunction: {
           DEFAULT: undefined,
         },
         transitionDuration: {
           DEFAULT: undefined,
         }
       },
     },
     plugins: [],
   }

   This will make the transition-* utilities only apply a single property like I think you're expecting.

2. Use CSS variables to handle the duration coming in as a prop instead of setting the duration as an inline style:

   function MyComponent({ duration }) {
     return (
       <div
         style={{'--duration': duration}}
         className="transition-all duration-[var(--duration)]"
       >
         ...
       </div>
     )
   }

   This will make sure that the transition-duration property is set by Tailwind and therefore respects your important configuration so it's not overridden by the default value in transition-all.

Hope that helps!

[herzaso]

It sure does. Thanks @adamwathan and @wongjn