Image Tailwind是一個新興的CSS框架，不同於Bootstrap以及Foundation這些框架的地方是，Taiwind並不是一個UI工具包，在Tailwind中甚至沒有任何的UI組件，也沒有包含任何主題。他有的是一堆預先定義好的class，而這些class也僅僅是用簡單的CSS所組成，我們可以使用這些現有的素材組合出自己的風格。

使用Tailwind並不能像Bootstrap一樣，加入幾個class即能擁有一個美觀且功能完善的組件，相反的是我們可以客製化的組合一些class來做出獨一無二的組件，這在核心概念上有著極大的不同，因此Tailwind適合給設計感更強烈的設計師使用，改善使用者一眼就可以看出這個網頁就是用某某框架架設出來的倦怠感。

Tailwind提供了顏色、邊框、格線系統、Flexbox…許多的預定義class，可以到官方文件查詢有哪些class可以使用。

我們先使用CDN的方式，快速的來嘗試一下這款CSS框架的威力，將下面的程式碼加入到html的head標籤內即可開始使用 

    
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">

我們可以透過組合一些class來做出不同的效果

例如:

我剛開始看到Tailwind時心中的一個疑問是，與其使用這些預定義好的class，我不如自己寫CSS就好了不是嗎？對於一些簡單的class來說確實是如此，但是有些複雜的class例如Grid，我們反而使用Tailwind更顯得方便。Tailwind的定位我覺得更像是CSS的巨集，它定義的class都是設計師在CSS上常用的屬性，讓我們可以不用在意撰寫CSS時的參數設定，更直接的使用這些風格。

我們剛剛淺嘗了一些Tailwind的class所提供的方法直接的應用在html上，但是Tailwind的威力不只如此，我們可以使用Tailwind當成基底，在它之上建立自己所使用的一套CSS，更可以使用PostCSS的方式做更多擴展。

我們使用最簡單的Tailwind CLI來達成這個目的，我們建立一個tailwind的專案資料夾，並且在其中擴展Tailwind

    
mkdir tailwind && cd tailwind       # 建立專案資料夾
yarn add tailwindcss -D             # 安裝tailwindcss套件到dev環境下
yarn run tailwind init .tailwindrc  # 產生.tailwindrc設定檔

我們可以透過修改.tailwindrc來改變tailwind預設的行為，例如顏色的色碼之類的定義等等，不過我們這裡不對他進行變更。

接下來撰寫一個css檔案main.css，放置我們自己的css

    
@tailwind preflight;    /* 進行CSS的前處理: 如Normalize.css等等*/

/*
 * 在這個區域撰寫自己的CSS，並且是可以被Tailwind覆蓋的部分
 *
 */

@tailwind utilities;    /* 注入Tailwind的CSS內容 */

/*
 *
 * 在這個區域撰寫基於Tailwind，或者覆蓋Tailwind的部分。
 *
 */

.roundedButton {
    @apply .rounded-full .px-4 .py-1 .border;   /* 使用@apply結合多個Tailwind的class內容到自己的class中 */
}

接下來我們使用Tailwind CLI來處裡我們的CSS

    
yarn run tailwind build main.css -c .tailwindrc.js -o output.css

最後僅需要在html中link output.css 就可以使用我們剛剛設計的roundedButton這個class。

注意: output.css中已經包含tailwind.css的內容，因此我們也不用再引入tailwind.css。

References:
1. Tailwind Document
2. postcss