So machen Sie Button-Stile im gesamten Projekt global, indem Sie sowohl Rückenwind als auch Angular verwenden

Question

Ich bin ein Anfänger und habe an Angular gearbeitet und mich für Tailwind für das Styling entschieden, weil jede Tailwind-Klasse inline ist und die Stilklasse für die Schaltfläche sehr groß wird und ich diese Klasse überall verwenden muss, um die Schaltfläche verwenden zu können . Dadurch sieht der Code umständlich aus und die Wartung wird mühsam.

Meine Frage ist, wie man mit Rückenwind den Schaltflächenstil global gestalten kann. Ich habe auch mehrere Schaltflächenstile wie button-no-bg 、 button-bg-red

Ich habe versucht, sie mit @apply指令在Angular的styles.css

zu definieren

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

Um Codeduplizierung zu vermeiden, würde ich gerne wissen, wie man eine Schaltflächenklasse global mit mehreren Schaltflächennamen und den zugehörigen Klassen macht. Wenn es sich nicht um eine vollständige Antwort handelt, geben Sie bitte eine Referenz an.

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"
        ],