Tailwindcss 如何自定义 css 类？

TailwindCSS中如何使 @apply 适用于自定义 CSS 类？,在 TailwindCSS 中，使用 @apply 指令可以在你的自定义CSS中应用 Tailwind 的实用工具类。要使用 @apply 使其适用于自定义CSS类，你需要在CSS文件中创建一个自定义类并使用 @apply 指令来添加所需的 Tailwind 实用工具类。

下面是一个示例，展示如何在 TailwindCSS 项目中通过 @apply 指令将多个实用工具类应用到一个自定义CSS类：

css
/* 引入 Tailwind 的基础样式 */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* 创建一个自定义的CSS类 */
.btn-custom {
  @apply bg-blue-500 text-white py-2 px-4 rounded;
}

/* 或者你也可以在响应式设计中使用它 */
.btn-responsive {
  @apply px-4 py-2;
  @apply md:px-6 md:py-3;
}

在这个例子中，.btn-custom 类将具有蓝色背景、白色文本、垂直间距 py-2、水平间距 px-4，以及圆角。.btn-responsive 类在移动端和桌面端有不同的内边距设置，使用 md: 前缀表示在中等断点（即桌面设备）时生效的样式。

请注意，使用 @apply 时，应该遵循一些规则：

• @apply 不能与复杂的选择器一起使用，例如伪类或媒体查询中的嵌套选择器。
• 只能在 CSS 规则的顶层使用 @apply，不能在 CSS 规则内的嵌套规则中使用。
• 不能在使用 @apply 的同一个规则中写入其他CSS声明，除非它们是 Tailwind 的自定义实用工具或组件。

确保在实际项目中，你已经安装了TailwindCSS并且正确配置了它的构建过程，因为TailwindCSS需要通过其构建工具来处理 @apply 指令。

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

shell
// 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这些类，就像它们是内置的一样。

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