How to make Button styles global throughout the project using both tailwind and Angular

Question

I'm a beginner and I've been looking into Angular and decided to use Tailwind for styling, since every Tailwind class is inline, the style class for the button becomes huge and in order to use the button I have to use This class is everywhere. This makes the code look cumbersome and maintenance becomes a pain.

My question is how to use tailwind to make button styles global. I also have multiple styles of buttons, such as button-no-bg, button-bg-red

I tried defining them in Angular's styles.css using the @apply directive

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

To avoid code duplication, I would like to know how to make a button class global with multiple button names and their associated classes. If it's not a complete answer, please share a reference.

Answer 1

I'm new to angular tailwind and not quite sure this way is the "better" way, but waiting for another better response...

Follow the instructions in the documentation but exclude @tailwinds in styles.css else in a new file styles-tailwinds.css

Execute by time

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

First, any changes in styles-tailwinds.css will create a new file in src/output.css

Edit your angular.json to add this .css, so the array style becomes like

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