【Laravel實戰】10分鐘輕鬆完成在Laravel安裝Tailwind CSS

因為 Laravel8 預設的分頁是透過 Tailwind CSS 來實現，所以需要先安裝好 Tailwind CSS。這篇文章將一步步地引導你在Laravel專案內安裝好Tailwind CSS

下面需要輸入指令的部分，請開啟Terminal介面並切換到Laravel專案資料夾來進行輸入

Step 1.安裝前端套件

npm install

Step 2.透過npm來安裝 Tailwind CSS

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

Step 3.建立 Tailwind CSS 設定檔案

npx tailwindcss init

生成好的檔案內容如下:

// tailwind.config.js

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

Step 4.修改設定檔內的purge設定

將之改成如下:

purge: [
     './resources/**/*.blade.php',
     './resources/**/*.js',
     './resources/**/*.vue',
   ],

Step 5.在Laravel Mix 設置檔中加入 tailwind CSS

//webpack.mix.js

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

Step 6.編輯 app.css 素材檔

在 app.css 加入以下程式碼

/* ./resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 7.在佈局視圖載入 app.css

在 resources/views/layouts/app.blade.php 加入以下內容

<meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link href="{{ asset('css/app.css') }}" rel="stylesheet">

Step 8.編譯 css/app.css

執行以下指令

npm run dev (開發環境)
npm run production (正式環境)