Cara menjadikan gaya Butang global sepanjang projek menggunakan kedua-dua tailwind dan Angular

Question

Saya seorang pemula dan saya telah mengusahakan Angular dan memutuskan untuk menggunakan Tailwind untuk penggayaan kerana setiap kelas Tailwind adalah sebaris dan kelas gaya untuk butang menjadi besar dan untuk menggunakan butang saya perlu menggunakan kelas itu di mana-mana sahaja . Ini menjadikan kod kelihatan menyusahkan dan penyelenggaraan menjadi menyusahkan.

Soalan saya ialah bagaimana untuk menjadikan gaya butang global menggunakan tailwind, saya juga mempunyai pelbagai gaya butang seperti button-no-bg 、 button-bg-red

Saya cuba mentakrifkannya menggunakan @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 ......;
}

Untuk mengelakkan pertindihan kod, saya ingin tahu cara menjadikan kelas butang global dengan berbilang nama butang dan kelas yang berkaitan dengannya. Jika ia bukan jawapan yang lengkap, sila kongsikan rujukan.

Answer 1

Saya baru dalam bidang angle tailwinds dan tidak pasti cara ini adalah cara yang "lebih baik", tetapi menunggu satu lagi respons yang lebih baik...

Ikuti arahan dalam dokumentasi tetapi kecualikan @tailwinds dalam styles.css lain dalam fail baharu styles-tailwinds.css

Pelaksanaan mengikut masa

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

Pertama, sebarang perubahan dalam styles-tailwinds.css akan mencipta fail baharu dalam src/output.css

Edit angular.json anda untuk menambah .css ini, jadi gaya tatasusunan menjadi seperti

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