TailwindCSS: 2 transitions properties

Solution 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>