Tailwind: 如何让@apply在自定义CSS类中起作用？

Question

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

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

如果您想添加一个基本实用程序并使用CSS，但它不是tailwind默认库的一部分：

@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
}

你会如何做到这一点？

- Zack Plauché

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'
        },
      })
    })
  ]

}

那么您就可以像使用内置类一样在任何地方应用这些类。

（我意识到这个问题可能已经不再与您相关，但我在搜索时找到了它，所以这是给其他人发现这个问题的人！）

- jspn

---

这个评论帮了我大忙，谢谢: ) 真烦不能 @ apply，而是必须在配置文件中列出每个实用程序类的每个属性... 我想我只会将实用程序类嵌入到代码中，而不使用 @ apply... （stackoverflow 太蠢了，除非我在 @ 符号后面加一个空格，否则我无法发表评论） - Justin

Answer 2

可以使用postcss extend package来实现。前提是使用postcss安装了tailwind。

可以使用@extend而不是@apply来添加自定义类的样式。因此，类定义将变成这样 -

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

- Vishal

Answer 3

你可以在CSS和CSS预处理器中创建自定义类。

为了更好的文件结构和可读性，我更喜欢在CSS中定义自定义类，而不是在tailwind.config文件中定义。

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

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

  .ease {
    transition: ease;
  }
}

/* then... */
.style-this-div {
  @apply will-change-transform ease;
}

- Muhammad Reda