承上篇

為了降低維運人員的怒氣值，今天就來看看 tailwind 的 config 檔：

執筆的當下版本是v3，所以補充一下，Tailwind v3 之前，主要靠 tailwind.config.ts 管理自訂樣式，Tailwind v4 之後官方文件就推薦使用 @theme 指令，可以直接在 CSS 中定義變數，並自動生成 Tailwind 類別，細節可以見 DAY 7~

1. content:
   如同上述，這是用於告訴 Tailwind 哪些文件會包含 Tailwind CSS 的 class，這是 JIT 模式下必要的配置，並在打包專案時，掃描這些路徑的文件，去除未用到的 class，縮小檔案的大小，這也是 Bootstrap 做不到的事。

2. theme:
   可以覆蓋 Tailwind 的預設值，例如下列的 screen、colors、fontFamily的物件，都覆蓋了預設值，例如：bg-blue-500 的預設色票為#3b82f6，覆蓋之後的色票就是改為#1fb6ff。
   而 extend 物件中則是擴充設定值，例如 spacing，擴充前，並沒有 m-128 或 p-128 的指令，但擴充後就能達到 margin 或 padding 要 32rem 的設定。

   /** @type {import('tailwindcss').Config} */
    module.exports = {
      theme: {
        screens: {
          sm: '480px',
          md: '768px',
          lg: '976px',
          xl: '1440px',
        },
        colors: {
          'blue':  {
            500: '#1fb6ff',  // 將 bg-blue-500 的色票改為 #1fb6ff
          },
          'purple': '#7e5bef',
          'pink': '#ff49db',
          'orange': '#ff7849',
          'green': '#13ce66',
          'yellow': '#ffc82c',
          'gray-dark': '#273444',
          'gray': '#8492a6',
          'gray-light': '#d3dce6',
        },
        fontFamily: {
          sans: ['Graphik', 'sans-serif'],
          serif: ['Merriweather', 'serif'],
        },
        extend: {
          spacing: {
            '128': '32rem',
            '144': '36rem',
          },
          borderRadius: {
            '4xl': '2rem',
          }
        }
      }
    }
   

3. plugins:
   plugins 是 Tailwind CSS 擴展功能的關鍵部分，允許開發者使用官方和社群提供的各種插件，從而增強 Tailwind 的功能。這部分可以看看官方文件中的說明，或是直接搜尋社群開發的各種插件，這裡就不多做贅述了。

學會使用 tailwind.config.ts，不但能維持開發者的快樂，更能降低維運人員的血壓～若能搭配一個合適的 UI 框架，方便管理與開發元件，快樂度與和氣度直接再加50分！！！