如何在整个项目中使 Button 样式全局化，同时使用 tailwind 和 Angular

Question

我是一个初学者，我一直在研究 Angular 并决定使用 Tailwind 进行样式设计，因为每个 Tailwind 类都是内联的，按钮的样式类变得很大，为了使用该按钮，我必须使用该类到处。这使得代码看起来很繁琐并且维护变得很痛苦。

我的问题是如何使用 tailwind 使按钮样式全局化，我也有多种样式的按钮，例如 button-no-bg 、 button-bg-red

我尝试使用@apply指令在Angular的styles.css中定义它们

@tailwind base;
@tailwind components;
@tailwind utilities; 
.button-no-bg{
  @apply bg-white text-blue-500 border p-1 px-8  text-xs font-bold border-blue-500;
}
.button-red-bg{
  @apply ......;
}

为了避免代码重复，我想知道如何使按钮类具有多个按钮名称及其关联类的全局性。如果不是完整答案，请分享参考。

Answer 1

我是角度顺风的新手，不太确定这种方式是“更好”的方式，但正在等待另一个更好的回应......

按照文档中的说明进行操作，但不包括 styles.css 中的 @tailwinds else 在新文件中 styles-tailwinds.css

按时间执行

npx tailwindcss -i ./src/styles-tailwinds.css -o ./src/output.css --watch
//and
ng serve

首先，styles-tailwinds.css 中的任何更改都会在 src/output.css 中创建一个新文件

编辑你的 angular.json 添加这个 .css，所以数组样式变得像

"styles": [
          "src/styles.css",
          "src/output.css"
        ],