如何在整個專案中使 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"
        ],