Combining two transitions properties in 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>