[v4] Transition properties are not included in utility CSS classes

[lubomirblazekcz]

What version of Tailwind CSS are you using?

For example: v4.0.0-alpha.21

Describe your issue

Transition props from @theme like --default-transition-duration or --transition-timing-function-linear change the value, but the CSS props are not present. Eg.

CSS properties missing

Current

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

Shloud be

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
    transition-timing-function: var(--transition-timing-function-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: var(--default-transition-duration, 150ms);
  }

transition-property

Also the same should be applied to transition-property, but I didn't find how this can be changed. There should be --default-transition-property prop I guess?

I also don't know if it's currently possible to add new transition properties like here - https://tailwindcss.com/docs/transition-property#customizing-your-theme

[adamwathan]

Thanks, fixed 👍

[lubomirblazekcz]

@adamwathan what about the transition-property? Should I create new issue for that? Or is it something planned in future releases?

I can imagine situations where you would want to extend the list, or use it in the CSS.