Tailwind：如何使 @apply 适用于自定义 CSS 类？

Question

假设您有一个基本的项目设置：

@tailwind base;
@tailwind components;
@tailwind utilities;

并且您想要添加一个使用 CSS 的基本实用程序，该实用程序不属于 tailwinds 默认库的一部分：

@layer utilities {
  .will-change-transform {
    will-change: transform;
  }
}

或者

@layer utilities {
  .ease {
    transition: ease;
  }
}

并且您希望能够将@apply其传递给自定义类而不会收到错误：

.my-component {
  @apply block hover:scale-110 w-full ease will-change-transform
}

你会怎么做？

Answer 1

如果没有看到您的环境或您收到的错误，我无法确定，但规避这些问题的记录方法是在 tailwind 配置文件中定义您的类：

// tailwind.config.cjs
const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...

  plugins: [
    plugin(function ({ addComponents, theme }) {
      addComponents({
        '.will-change-trans': { // `will-change-transform` is now included in Tailwind CSS 3.0 so using alternative class name for this example
          willChange: 'transform'
        },
        '.ease': {
          transition: 'ease'
        },
      })
    })
  ]

}

然后你可以在任何地方@apply这些类，就像它们是内置的一样。

（我意识到这个问题可能不再与您相关，但我在搜索时发现了它，所以这适用于其他偶然发现这个问题的人！）