tailwindCSS + Astro 3, @apply で、クラス短縮適用

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Normal-button</button>

<button class="btn-green">Apply button</button>

@tailwind base;
@tailwind components;
@tailwind utilities;

.btn {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

.btn-green {
  @apply bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded;
}

npx tailwindcss -i ./src/input.css -o ./public/styles/output.css

#watch
npx tailwindcss -i ./src/input.css -o ./public/styles/output.css --watch

<link href="/styles/output.css" rel="stylesheet">

  "scripts": {
...
    "build-css": "npx tailwindcss -i ./src/input.css -o ./public/styles/output.css",
...
  },

yarn build-css