Combining two transitions properties in Tailwind CSS - tailwind-css

Question

I wanna have transition-transform and transition-shadow, not neither transition-all nor only one. Putting the two not effecting, i couldn't find doc for it, i tried playing around like: transition-[transform, shadow] and obviously didn't work.
Basically, i have cards, you hover on it, it scale up a bit and drops a shadow.
className='hover:scale-105 hover:shadow-2xl transition-transform transition-shadow'
How to put transition properties transform and shadow together?
My app has white and black theme, that's way i don't want just to put transition-all because it flashes when switching the theme.

Answer 1

Only for TailwindCSS v3
Setting a class like transition-[transform, shadow] is interpretted by browsers as two separate classes: transition-[transform, and shadow].
You need to remove the space if possible or replace it by an underscore (_). That said, in your case you simply need to write:
transition-[transform,shadow]
// or
transition-[transform,_shadow]
If you want to customize their durations as well you can write something like:
[transition:transform_1s,shadow_2s]
Based on Adding Custom Styles - TailwindCSS v3
When an arbitrary value needs to contain a space, use an underscore (_) instead and Tailwind will automatically convert it to a space at build-time:
<div class="grid grid-cols-[1fr_500px_2fr]">
<!-- compiled to -- grid-template-columns: 1fr 500px 2fr; -->
</div>
In situations where underscores are common but spaces are invalid, Tailwind will preserve the underscore instead of converting it to a space, for example in URLs:
<div class="bg-[url('/what_a_rush.png')]">
<!-- compiled to -- background-image: url('/what_a_rush.png'); -->
</div>
In the rare case that you actually need to use an underscore but it’s ambiguous because a space is valid as well, escape the underscore with a backslash and Tailwind won’t convert it to a space:
<div class="before:content-['hello\_world']">
<!-- compiled to -- content: var('hello_world'); -->
</div>

Answer 2

I needed to do transition-[transform,box-shadow] not shadow

Answer 3

It is a bit off the question, however since I found this answer while searching for a solution I will give it a try.
To combine 2 transition properties with different durations or timing function, you would need to use Tailwindcss v3 with something like:
before:[transition:_color_0.1s,transform_0.2s_ease-out]
It answers https://stackoverflow.com/users/16945230/a-anvarbekov problem, I would have commented it but SO requires 50 reps to comment now.
Hope it helps some people out there!