TailwindCSS：2 个过渡属性

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

当任意值需要包含空格时，请改用下划线 (_)，Tailwind 会在构建时自动将其转换为空格：

<div class="grid grid-cols-[1fr_500px_2fr]">
  <!-- compiled to -- grid-template-columns: 1fr 500px 2fr; -->
</div>

在下划线很常见但空格无效的情况下，Tailwind 将保留下划线而不是将其转换为空格，例如在 URL 中：

<div class="bg-[url('/what_a_rush.png')]">
  <!-- compiled to -- background-image: url('/what_a_rush.png'); -->
</div>

在极少数情况下，您实际上需要使用下划线，但由于空格也是有效的，所以它不明确，请使用反斜杠转义下划线，Tailwind 不会将其转换为空格：

<div class="before:content-['hello\_world']">
  <!-- compiled to -- content: var('hello_world'); -->
</div>