时间戳

首页 > 解决方案 > 有没有办法在我自己的 css 声明中连接现有的 Tailwind 类？

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

问题描述

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

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

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

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

标签： javascriptcsssassfrontendtailwind-css

解决方案

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

请参阅此链接，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

推荐阅读