在 Laravel 安裝 Tailwind CSS

建立專案

首先，建立一個新的 Laravel，如果你還沒有一個已經設定好的專案。最常見的方式是使用 the Laravel Installer:

laravel new my-project
cd my-project

再來，使用 npm 安裝 Laravel 的前端依賴套件 (dependencies)：

npm install

設定 Tailwind CSS

Tailwind CSS 需要 Node.js 12.13.0 以上版本。

使用 npm 安裝 Tailwind

使用 npm 安裝 Tailwind 和它需要的依賴套件 (peer-dependencies)：

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

建立設定檔案 file

然後產生 tailwind.config.js 檔案：

npx tailwindcss init

這會在專案的根目錄建立一個基本的 tailwind.config.js 檔案：

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

想了解更多關於 Tailwind 的設定可以到配置文件。

讓 Tailwind 在生產環境建置時移除不必要的樣式

在你的 tailwind.config.js 檔案設定 purge 選項指定路徑到你所有的 Blade templates 和 JavaScript components，讓 Tailwind 可以在生產環境建置時清除沒有使用的樣式：

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

閱讀我們在優化生產環境的說明來獲得更多關於「清除不必要樣式以增進效能」的資訊。

在 Laravel Mix 中設定 Tailwind

在你的 webpack.mix.js 新增 tailwindcss 的 PostCSS 插件：

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

在你的 CSS 中使用 Tailwind

打開 Laravel 預先為你建立好的 ./resources/css/app.css 檔案

使用 @tailwind 指令來引用 Tailwind 的 base、components 和 utilities 樣式，並且取代原本檔案的內容：

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

Tailwind 會在建置時將這些指令替換成你配置系統時所對應的樣式內容。

閱讀我們的增加基底樣式、提取成元件和增加新功能文件以使用 Tailwind 為你自定義的 CSS 做最好的擴充。

再來，在你的主要 Blade 樣板中引用你的樣式內容 (通常是 resources/views/layouts/app.blade.php 或類似檔案) 並且新增響應式 meta tag，如果沒有的話：

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

你已經完成了！現在當你執行 npm run watch, npm run dev 或 npm run prod，Tailwind CSS 將會在你的 Laravel Mix 專案中運行。

接著來了解功能優先流程 →