Tailwind CSS 主頁
  1. 安裝
  2. 使用 Laravel 安裝 Tailwind CSS

  1. 建立您的專案

    如果您尚未設定，請先建立一個新的 Laravel 專案。最常見的方法是使用 Composer create-project 指令。

    終端機
    composer create-project laravel/laravel my-projectcd my-project

  2. 安裝 Tailwind CSS

    透過 npm 安裝 tailwindcss 及其對等相依項目，然後執行 init 指令以產生 tailwind.config.js 和 postcss.config.js。

    終端機
    npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

  3. 設定您的範本路徑

    在您的 tailwind.config.js 檔案中加入所有範本檔案的路徑。

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  4. 將 Tailwind 指令新增至你的 CSS

    將每個 Tailwind 層的 @tailwind 指令新增至你的 ./resources/css/app.css 檔案。

    app.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  5. 開始你的建置程序

    使用 npm run dev 執行你的建置程序。

    終端機
    npm run dev

  6. 開始在你的專案中使用 Tailwind

    確定你的編譯 CSS 已包含在 <head> 中，然後開始使用 Tailwind 的實用程式類別來設定你的內容樣式。

    app.blade.php
    <!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  @vite('resources/css/app.css')
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>