TailwindCSS：组合 2 个过渡属性
TailwindCSS: Combining 2 transitions properties
我想要 transition-transform 和 transition-shadow，而不是 transition-all 也不是只有一个。把这两个不影响，我找不到它的文档，我试过像这样玩：transition-[transform, shadow] 显然没有用。
基本上，我有卡片，你将鼠标悬停在上面，它会放大一点并投下阴影。
className='hover:scale-105 hover:shadow-2xl transition-transform transition-shadow'
如何将过渡属性 transform 和 shadow 放在一起？
我的应用程序有白色和黑色主题，所以我不想只放 transition-all 因为切换主题时它会闪烁。
仅适用于 TailwindCSS v3
设置像 transition-[transform, shadow] 这样的 class 被浏览器解释为两个独立的 classes：transition-[transform, 和 shadow].
如果可能，您需要删除 space 或将其替换为下划线 (_)。也就是说，在你的情况下你只需要写：
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>
我需要做 transition-[transform,box-shadow] 而不是 shadow
我想要 transition-transform 和 transition-shadow，而不是 transition-all 也不是只有一个。把这两个不影响，我找不到它的文档，我试过像这样玩：transition-[transform, shadow] 显然没有用。
基本上，我有卡片，你将鼠标悬停在上面，它会放大一点并投下阴影。
className='hover:scale-105 hover:shadow-2xl transition-transform transition-shadow'
如何将过渡属性 transform 和 shadow 放在一起？
我的应用程序有白色和黑色主题，所以我不想只放 transition-all 因为切换主题时它会闪烁。
仅适用于 TailwindCSS v3
设置像 transition-[transform, shadow] 这样的 class 被浏览器解释为两个独立的 classes：transition-[transform, 和 shadow].
如果可能，您需要删除 space 或将其替换为下划线 (_)。也就是说，在你的情况下你只需要写：
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>
我需要做 transition-[transform,box-shadow] 而不是 shadow