[Tailwind] 客製化-基本結構及顏色

tailwind.config.js是什麼

在前面的章節我們有建立一個tailwind.config.js檔案，並且在裡面有撰寫一些基本的設定。在這支設定檔案中，這個檔案是使用js的物件陣列寫法去設定。在官方文件中也會詳細介紹如何客製化檔案設定檔的基本結構如下

tailwind.config.js
// 使用ES6的export default寫法
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

以上程式碼使用ES6 export default輸出方式

content

在content的部分我們需要設定要監控哪些的檔案，來決定之後postcss會去保留的css樣式。要在content內容中所偵測的檔案中，有使用到的css才會被保留。

官方網站提供的路徑是.src/資料夾下的全部（不管在幾層資料夾內）html跟js檔案，以我們的資料夾結構應該要調整成./pages/**/*.html ，當然這部分可以依據需求去調整。

theme

theme主要是用來客製化的，我們在客製化有兩種方式，分別為

取代 如果是要整個取代原本預設的設定，那就直接在theme中撰寫設定
擴充 如果沒有要整個取代，而是希望基於原本就有的tailwind樣式再去擴充（例如顏色想要多新增一個色系），則要將設定放在extend中

plugins

顧名思義就是套件引入的地方，在官方文件中可以看到有介紹，引入方式如下…

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

另外一個由官方網站所提供，我們也很常使用的套件-表單套件
參考資料：Github

客製化colors

官方文件中有給出可以在theme中客製化的所有設定

完全取代預設顏色

我們以客製化colors為例，可以看到官方網站已經有提供目前所有的顏色並且在官方文件下方也有提到要克制化需要設定如下

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'purple': '#3f3cbb',
      'midnight': '#121063',
      'metal': '#565584',
      'tahiti': '#3ab7bf',
      'silver': '#ecebff',
      'bubble-gum': '#ff77e9',
      'bermuda': '#78dcca',
    },
  },
}

需要注意這邊我們的colors是直接撰寫在theme內

寫法是直接設定一個colors物件，並且在屬性名稱指定，當作class名稱，而且在有使用到顏色系統的地方都會新增出對應的標籤以上面設定來說我們可以撰寫html如下，修改背景顏色以及文字顏色

index.html
<div class="bg-midnight text-tahiti">
  ...
</div>

caution

theme物件下面的colors屬性名稱，是官方文件所指定的，不可以自己設定名稱。
因為我們是直接寫在theme下面設定color:，所以原本預設的都會被覆蓋掉，例如這時候我們使用text-blue-500就不會出現顏色

保留預設顏色並且擴充客製化設定

那如果我們希望保留原本的顏色，並且在其之上額外擴充，我們就需要將colors這個物件寫在extend中寫法如下：

tailwind.confgi.js
export default {
  theme: {
    extend: {
      colors: {
        'silver': '#ecebff',
      }
    },
  },
}

需要注意這邊在theme下先是新增了extend，最後才是新增colors。這樣就可以同時保有原本的色系，並且加上新的silver

顏色設定的額外補充

在顏色設定上，tailwind額外提供了幾種設定方式

新增色系的100~900深淺

tailwind.config.js設定範例

tailwind.config.js
colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'tahiti': {
        100: '#cffafe',
        200: '#a5f3fc',
        300: '#67e8f9',
        400: '#22d3ee',
        500: '#06b6d4',
        600: '#0891b2',
        700: '#0e7490',
        800: '#155e75',
        900: '#164e63',
        DEFAULT: '#ffaaaa'
      },
      // ...
    }

可以使用物件的方式，在每個顏色下再額外設定屬性名稱，使用方式則是變成 text-tahiti-100 ，bg-tahiti-900等等需要注意如果設定成物件方式，則text-tahiti不會有任何的樣式。
如果希望text-tahiti也有樣式的話，則要在物件內再額外設定一個DEFAULT(需要全部大寫）。
通常會使用在只有三種顏色變化階段的時候，會使用light,DEFAULT,dark三種設定去變化。

JIT tailwind也支援即時編譯，例如html如下

html範例

index.html
button class="bg-[#1da1f2] text-white ...">
  <svg><!-- ... --></svg>
  Share on Twitter
</button>

可以看到bg-[#1da1f2]就是JIT，雖然我們並沒有在tailwind.config.js中新增這個顏色，但是我們可以使用中括號的方式去新增出這個沒有設定的顏色。通常用於整個網站只有一兩個地方有使用到的地方。如果很常使用則建議從config中新增

[Tailwind] 客製化-基本結構及顏色

tailwind.config.js是什麼​

content​

theme​

plugins​

客製化colors​

完全取代預設顏色​

保留預設顏色並且擴充客製化設定​