前言

今篇我們把 Laravel 整合TailwindCSS 同時也加入SCSS功能。

上一篇：[Laravel教學筆記02] Laravel 8 初見Controller、Blade、Route 我們已經把Laravel 基本的東西了解了一下，一口氣學了3樣東西是否太多？這一章將會是較輕鬆的。

Laravel本身是一套PHP的框架，也自己的模板系統，但在css的編寫上卻是原生的，印象中舊的某些版本會預設引入了bootstrap 還是某些官方套件有整合到bootstatrap? 我也是Laravel 8才開始正式學習Laravel。

個人對bootstrap 又愛又恨，因為當年剛出沒多年時，的確快速協助了我們寫RWD網頁，但個人對他的預設風格確實不太喜歡，配色等等是可以作出修改，但用一套css框架不就是為了直接用嗎？另外就是正因為太多人用了，所以「撞樣式」的機會也太大了，網絡上 Laravel 8 已有些文章教大家整合bootstrap5了，不如這次我們試試整合TailwindCSS？

什麼是TailwindCSS？(很主觀)

最近不停看到TailwindCSS相關的文章，TailwindCSS跟Bootstrap 的差別其實三言兩語講不清，你可理解為TailwindCSS是inline css 的強化版，當然是很強的那種...

優點

快速，你可以直接在class中輸入官方已做好的「常用樣式」

比如

<div class="mx-auto md:w-3/4 sm:w-full bg-red-300 text-blue-100">Hello</div>

意思就是
mx-auto：margin 水平auto
md:w-3/4 sm:w-full：md時寬度是頁面的4分3，sm時寬度是100％
bg-red-300：背色是某個紅色
text-blue-100：字的顏色是某個藍色

是否比起bootstrap有些更直觀更爽快的感覺？

缺點
  1. 新手而言，沒有bootstrap簡單易上手
    bootstrap 是傾向於用 components 去選擇，但tailwindCSS 則是更自由地給你由0架構，所以如果你要求不高、也不是太需要客制化的話，其實可能bootstrap會更快一點，因為網上既有的資料也較多
  2. 承上，就是網絡資源較少，tailwindCSS 的資源的確比bootstrap少很多，如果你是想直接套用的話真的不太合適，因為官方沒有提供太多可即用的components。但他們有售收費版的 Components UI

以上的優缺點都是本人十分主觀的感覺

Laravel 整合 TailwindCSS

用npm安tailwindcss + postcss + autoprefixer

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

tailwindcss init 初始化

npx tailwindcss init

然後你的根目錄會出現 tailwind.config.js，現在直接把purge做設定

module.exports = {
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

因為直接打包整個tailwindcss會有大約3Mb的css文件，基本上是不合接受的的大小，purge 是指，這些文件中出現過的css class name 才把它們打包

編輯：webpack.mix.js，注意頂部還有一行的，不要整個文件取代

  mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
     require("tailwindcss"),
    ]);

編輯：resources/css/app.css，頂部引入

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

編輯你的balde文件，比如：resources/views/layouts/app.blade.php

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!--...something...-->
<body>
    <div class="mx-auto md:w-3/4 sm:w-full bg-red-300 text-blue-100">
        Hello
    </div>
</body>

一切就緒了，嘗試一下，打開2個Terminal ,分別運行

php artisan serve
npm run watch

run watch 這個如果成功，你會見到
[Laravel教學筆記03] Laravel 整合Tailwindcss + SCSS 1
對的，就是3.8MB

那麼我們嘗試一下運行

npm run prod

[Laravel教學筆記03] Laravel 整合Tailwindcss + SCSS 3
記住，這個才是你上線的版本，2者有什麼差別？還記得上面 tailwind.config.js中的purge設定嗎？ 在purge中例出的文件webpack就會去爬行，只把認到的css class name 才在此刻打包給你，多餘的不打包

整合SCSS

上面的其實都是在TailwindCSS 官方網就有教整合的步驟了，我只是把他中文化了給大家，但SCSS則是官方沒提到的

唯一的差別就是修改webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/css/app.scss', 'public/css', {}, [
        require("tailwindcss"),
      ]);

同時把resources/css/app.css改名為resources/css/app.scss

再運作

npm run watch

現在你的Laravel項目同時支援了TailwindCSS 也支援SCSS了

前半部分參考官網: Install Tailwind CSS with Laravel

後記

為什麼我那麼執著要加上SCSS? 其實我也不知道，只是在開發模式時，我已經習慣了SCSS那種「樹狀式」命名

div.home{
    h1.title{
        font-size:1.8rem;
        span{
            font-size:1.2rem;
            color:#333;
        }
    }
}

可能你會反問，不是都引入了tailwindcss，手寫css應該是很少預到？
其實我也不太喜歡把所有class name都直接放在html，有時也會有重複使用的情況，那麼你可以用@apply

.home_hello{
    @apply mx-auto md:w-3/4 sm:w-full bg-red-300 text-blue-100;
    font-size:1.6rem; //做了@apply 也能直接寫css
}
<div class="home_hello">Hello</div>

這樣不會更舒服嗎？

當然這也有少少違背了選用TailwindCSS原意，所以我一般都是在開發期間不會這樣做，全部都寫去html，在後期才考慮把重複性高的做成component 或者用 @apply 做整合

現在我已經把 Laravel 整合TailwindCSS，下一步我們應該深一研究一下數據庫？

Related posts:

  1. [Laravel教學筆記 01] Laravel 入門及環境安裝
  2. [Laravel教學筆記02] Laravel 初見Controller、Blade、Route
  3. [Laravel 技巧] Laravel 建立一個常用變量文件 (無法讀取env的數值?)
  4. [CKEditor5教學] 基本安裝 + 插件安裝教學