FamilyBoard的前端是使用Blade樣板語言加上Tailwind CSS，所以今天要來介紹Tailwind CSS。

基本上每個Laracst的觀眾都會知道Tailwind CSS，因為Jeffrey Way很常在示範的專案中使用它，我接觸過後的經驗是如果是對前端一點都不熟的後端，那Bootstrap提供很多設計好的元件，可以讓你快速形成前端頁面，但是當你要客製化的時候就很痛苦，但是如果是有基礎CSS知識的後端，其實Tailwind很容易上手，因為它CSS類別的命名方式跟CSS很一致，可以很直覺地使用，而且很容易客製化。

PS 如果後端要做自己的Side Project，需要使用者界面時，可以外包或者是跟人合作，但是如果希望能夠做出一個簡單但美觀的原形，很推薦Tailwind CSS。

下載的方法還是以官方為準：

1. 用npm下載

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

2. 把下列內容加到resources/css/main.css中

假如你有一些希望客製化的元件，如組合某些按鈕的CSS類別時，可以使用＠apply，下面的兩個例子：
(1) button-add：可以產生一個button-add的CSS類別，其組合bg-blue-500、text-sm、text-white、px-4 、py-2、rounded-lg等類別。
(2) card：可以產生一個card的CSS類別，其組合bg-blue-200、p-5、rounded-lg、shadow等類別。

@tailwind base;

@tailwind components;

@tailwind utilities;

// customize your component css
.button-add{
    @apply .bg-blue-500 .text-sm .text-white .px-4 .py-2 .rounded-lg;
    box-shadow: 0 2px 7px 0 #b0eaff;
}

.card{
    @apply .bg-blue-200  .p-5 .rounded-lg .shadow
}

但是Adam Wathan - Tailwind CSS Best Practice Patterns的演講中有提到不要濫用@apply，要提取元件而非類別，所以如果是元件，應該要用如Vue Component等去管理。

3. 建立Tailwind config 文件
   這一個文件用於需要客製化Tailwind設定等，或者有套件需要Tailwind config 文件才能作用。

npx tailwindcss init

4. 將Tailwind導入成自己的CSS
   在專案的webpack.mix.js中加入：

mix.postCss('resources/css/main.css', 'public/css', [
    require('tailwindcss'),
  ]);

5. 專案的最後要將不需要的CSS類別去除掉

有很多可以設的選項
如果你只有使用blade，在Tailwind config文件中加入purge將不需要的CSS類別去除掉:

module.exports = {
  purge: {
    content: [
			'./resources/views/**/*.blade.php',
		]
  }
  ,
  theme: {
    extend: {
      
    },
  },
  variants: {},
  plugins: [],
}

參考文章：

Tailwind CSS
還在跟複雜的 CSS 的設定奮鬥嗎？用 Tailwind 來幫你實現真正的高效整潔！
Tailwind 完整教學|快速UI開發 | 高度客製化 | 跟其他Library 的優勢？
Adam Wathan - Tailwind CSS Best Practice Patterns
[https://ithelp.ithome.com.tw/articles/10234671]