tailwind-css - 在 Tailwind CSS 中组合两个过渡属性

Question

我想要transition-transform 和transition-shadow，既不是transition-all 也不是只有一个。把这两个不影响，我找不到它的文档，我尝试像这样玩:transition-[transform, shadow] 显然没有用。

基本上，我有卡片，你将鼠标悬停在上面，它会放大一点并投下阴影。
className='hover:scale-105 hover:shadow-2xl transition-transform transition-shadow'
如何将过渡属性 transform 和 shadow 放在一起？

我的应用程序有白色和黑色主题，这就是我不想只放置 transition-all 的方式，因为它在切换主题时会闪烁。

Answer 1

仅适用于 TailwindCSS v3

设置一个像transition-[transform, shadow]这样的类被浏览器解释为两个独立的类:transition-[transform, 和shadow].

如果可能，您需要删除空格或将其替换为下划线 (_)。也就是说，在你的情况下你只需要写:

transition-[transform,shadow]
// or
transition-[transform,_shadow]

如果你也想自定义它们的持续时间，你可以这样写:

[transition:transform_1s,shadow_2s]

---

基于 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>