Combining two transitions properties in Tailwind CSS

user_16945230 0
Viewed 967

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.

tailwind-css
3 Answers

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

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!

user_156035660

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

user_169452300
Related