[Tailwind CSS] 自訂元件(component)

不同於 bootstrap 這種 UI Framwork 一樣幫我們整理好了許多好用的元件(component)，Tailwind CSS 本身並沒有那麼多現成的元件，也就是說如果我們想要一個按鈕可能得這樣組合他提供的 CSS：

<!-- Before extracting a custom class -->
<button class="py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
  Save changes
</button>

只是這樣組起來就好像回復到以前用 inline-style 寫 CSS 一樣，看起來會有點煩躁，而 Tailwind CSS 就有提供我們自訂 class name 並把內建的樣式組合的方法，像是如果我們最後想要用一個 class name 來設定按鈕樣式：

<!-- After extracting a custom class -->
<button class="btn-primary">
  Save changes
</button>

在 Tailwind CSS 裡我們就可以利用 @apply 來設定：

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

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

這樣就能讓我們的 CSS 更好維護了。