✅ 一、前提要求

确保你已经安装了 Laravel 项目和 Node.js/npm。

laravel new my-project
cd my-project

✅ 二、安装 Tailwind CSS

Laravel 默认使用 Vite 构建工具，从 Laravel 9.19 开始集成 Vite。你可以用以下步骤安装 Tailwind：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

这会创建两个配置文件：

  • tailwind.config.js
  • postcss.config.js

✅ 三、配置 Tailwind

编辑 tailwind.config.js 文件，指定 Blade 模板路径：

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

✅ 四、修改 CSS 文件

在 resources/css/app.css 中添加以下内容：

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

✅ 五、配置 Vite（如果使用的是 Laravel Breeze/Jetstream/默认配置）

打开 vite.config.js，确保引入了 laravel-vite-plugin：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
  ],
});

✅ 六、编译 Tailwind

运行开发环境构建工具：

npm install
npm run dev

或使用监听模式：

npm run build
npm run dev

✅ 七、在 Blade 模板中引入 CSS

在你的主 Blade 模板中（如 resources/views/layouts/app.blade.php）添加：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Laravel + Tailwind Site</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-gray-100 text-gray-900">
    <div class="p-4">
        <h1 class="text-3xl font-bold">Hello Tailwind in Laravel!</h1>
        @yield('content')
    </div>
</body>
</html>

✅ 八、使用 Tailwind 在 Blade 中写组件/样式

你现在可以直接在任何 Blade 文件中使用 Tailwind 类名：

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

✅ 可选：使用 Laravel Breeze + Tailwind（快速集成）

composer require laravel/breeze --dev
php artisan breeze:install
npm install && npm run dev

它自动帮你装好 Tailwind 和前端结构。

✅ 可选：安装 Tailwind 插件

如需支持更多组件功能（例如动画、表单样式优化等），可以安装插件：

npm install @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

并在 tailwind.config.js 中引入：

plugins: [
  require('@tailwindcss/forms'),
  require('@tailwindcss/typography'),
  require('@tailwindcss/aspect-ratio'),
],