有没有办法在我自己的 css 声明中连接现有的 Tailwind 类？答案

【问题标题】：Is there a way to hook up an existing Tailwind class inside my own css declaration?有没有办法在我自己的 css 声明中连接现有的 Tailwind 类？
【发布时间】：2021-06-17 05:47:17
【问题描述】：

我不确定如何正确表达这个问题。我正在学习 Tailwind，我不禁注意到它是多么肮脏，因为 html 可以成为一个元素中不同类组合的巨大汤，我基本上必须为每个常见的元素重复它们我基本上写。我可能做错了，所以请纠正我。

我想知道是否有办法将 css 类放入 css 声明中，可能使用 css 处理器？

.this-button {
    .bg-red-500
    .rounded-lg
    .shadow-lg
    .animate-bounce
}

我很确定这也可以通过 Javascript 实现。我希望有一个使用 Sass 的解决方案，但任何事情都会很棒。你们推荐什么是管理元素中长 Tailwind 类组合的好做法？

【问题讨论】：

标签： javascript css sass frontend tailwind-css

【解决方案1】：

在 sass 中，你可以这样混合你的类：

.some-class {
    @extend .bg-red-500
    @extend .rounded-lg
    @extend .shadow-lg
    @extend .animate-bounce
}

现在 .some-class 包含这些类的每个属性。

在纯 css 中，您可以使用 @appplay 指令。来自tailwind docs 的示例。

.btn {
   @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black;
}

【讨论】：

老兄！你太棒了。太感谢了。我今晚试试这个。祝你有美好的一天！ ?

【解决方案2】：

是的，可以使用“提取组件”完成

参考此链接，https://tailwindcss.com/docs/extracting-components

在您完成顺风导入的.css 文件中，您可以使用@apply 指令。

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

@layer components {    
  .this-button {
     @apply bg-red-500 rounded-lg shadow-lg animate-bounce;
  }
}

SASS 参考此链接，https://tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus

【讨论】：