Use transition-colors and transition-shadow together

[mrleblanc101]

Currently, if I want to transition a background-color, I use transition-colors.
And if I want to transition a box-shadow, I use transition-shadow.

But what if I want both ? There is no easy way to combine them...
I could:

1. Use transition-all, but it has the side effect of animating the padding/margin when I go from mobile to desktop for example.
2. Use transition-[background-color,box-shadow], but this would omit all the other property for transition-colors, like color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;.
3. Add a new custom utility, but shouldn't this be baked in ?

Why doesn't Tailwindcss doesn't let us combine them like so class="transition-colors transition-shadow" like we can with other property ?

[mrleblanc101]

I guess this would be a breaking change, but maybe we could change transition to work like so:
class="transition transition-shadow transition-colors" where the first transition would declare the ruleset like so:
transition-property: var(--transition-colors) var(transition-shadow).

I think that would be similar to how box-shadow and gradient works.

[rozsazoltan]

Doesn't sound like a bad idea.

Although I'm curious how many different pairings they use, because then I'd have to apply two utilities for colors instead of just one.

[rozsazoltan]

By the way, if I only want to combine two transitions and am really fine with that, I could even use a modifier (I think colors and transform are the most important; alongside an arbitrary value it could actually be pretty neat).

https://play.tailwindcss.com/wrU6tbr9Gy?file=css (I added it under the name "transitions", just for the sake of the example)

<div class="transition-colors">
<div class="transitions-colors/shadow">
<div class="transitions-colors/[var(--transition-transfrom),var(--transition-shadow),opacity]">
<div class="transitions-colors/[var(--transition-shadow),opacity]">
<div class="transitions-colors/[box-shadow,opacity]">

<div class="transition-transform">
<div class="transitions-transform/colors">

@import "tailwindcss";

@theme inline {
  /* Defaults */
  --transition-colors: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  --transition-transform: transform, translate, scale, rotate;
  --transition-shadow: box-shadow;
  --transition-opacity: opacity;
  /* User custom */
  --transition-underline-offset: text-underline-offset;
  --transition-decoration-color: text-decoration-color;
  --transition-link: color, opacity, text-underline-offset, text-decoration-color;
}

@utility transitions-* {
  transition-property: --value(--transition-*, [*]), --modifier(--transition-*, [*]);
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

If we can access colors and transform via variables, then the problem is actually smaller, since I guess the idea came up because of these - colors are pretty hard to implement with arbitrary values.

And if a merge needs to be used more than once or twice, I still maintain my previous answer that it should be given a unique name using a namespace: #19249 (comment)

[rozsazoltan]

CSS doesn't merge them.

.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

TailwindCSS can't interfere with your source code or decide to rewrite it for you so that you don't use those two CSS classes. And the CSS classes each have only one property. CSS could provide something like that, but then it would also need to check whether each declaration is actually necessary.

.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
/*
That would actually make sense, I'm just not sure how feasible the merge would be.
Just an example what you want:

.transition-colors.transition-shadow {
  transition-property: box-shadow, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
*/

But you still have every option to extend the value of transition-* with custom names instead of creating a new utility:

• Combining multiple utilities to avoid code duplication; attaching a prefix to --value due to utility name shortening

[mrleblanc101]

I know CSS doesn't merge them 🤔
But why did tailwindcss decide that transition-shadow would overwrite transition-colors ?
They could be merged using CSS variables like tailwind already does for gradients and other properties, no ?

For example, grid col-span-2 col-start-3 and are combine to form:
grid-template: var(--col-start) / var(--col-span)
and not:
grid-template: var(--col-start);
grid-template: var(--col-span);

[rozsazoltan]

[mrleblanc101]

Although it's possible to achieve what I want with @utiltiy, I don't think it should be expected for begginer (like me) to know this.
Or at least it should be better documented.

[mrleblanc101]

Wait what, how is that grid-column: span 2 / span 2; even valid.
I had no idea it worked this way...
I don't use this syntax :O

[rozsazoltan]

Although it's possible to achieve what I want with @utiltiy, I don't think it should be expected for begginer (like me) to know this. Or at least it should be better documented.

Yeah, you're right, but it's so versatile that it's hard to put into concrete examples. The main point is that @utility name-* corresponds to a functional utility, and you can reference * with --value(). You can even use --modifier() to automatically handle a second value, which can be interpreted as name-value/modifier (e.g. bg-blue-500/60).

And you can reference any arbitrary namespace with --value(--my-namespace-name-*), which means the key set in @theme can also be extended freely. Besides that, you can easily access numbers, fractions, and spacing.

Some example for utility:

• How to declare your own classes similar to bg-colorname as a custom-* utility, which can accept nested colors from the Tailwind color palette
• Combining multiple utilities to avoid code duplication; attaching a prefix to --value due to utility name shortening
• The bg-opacity-* utility no longer exists as of v4 - how could it still be created?
• How can I use the -webkit-text-stroke setting similarly to the stroke-* utility?
• Support for bg-repeat-[<value>] under V4. #19234
• Additional SVG properties #6089 (comment)
• --value() in pseudo selector #19192 (comment)

For custom variant:

• Readable cross-browser (webkit, moz) input slider styling using custom-variants