如何在 tailwindcss 中使用 transform class 和 active pseudoclass

Question

我想给这样的按钮添加点击效果：

.btn-translate-effect {
    transition: transform .1s ease-in-out;
}

.btn-translate-effect:active {
   transform: translateY(3px);
}

使用顺风工具类。

但我无法弄明白。我试过这个：

<button class="transform active:translate-y-4"></button>

没用。我还像这样修改了变体配置 tailwind.config.js：

variants: {
  extend: {
    transform: ['active']
  },
}

但是没有用。

Answer 1

您需要在 tailwind 配置中将 transform 替换为 translate。

  variants: {
    translate: ['active'],
  },

how to use transform class with active pseudoclass in tailwindcss