如何在Laravel 10中集成Tailwind CSS？含认证安装与Vite配置疑问

AI 小北

2026-7-5

Laravel 10 集成 Laravel 认证组件与 Tailwind CSS（Vite 环境）

一、安装 Laravel 认证组件（以 Breeze 为例）

Laravel Breeze 是轻量适配 Vite 的认证脚手架，操作步骤如下：

安装 Breeze 开发包
```
composer require laravel/breeze --dev
```
执行安装命令，选择 Blade + Vite 选项（按提示输入对应序号）
```
php artisan breeze:install blade
```
执行数据库迁移，创建用户表
```
php artisan migrate
```
安装前端依赖
```
npm install
```

二、安装并配置 Tailwind CSS

针对 Vite 环境，按以下步骤完成配置：

安装 Tailwind 及相关依赖

npm install -D tailwindcss postcss autoprefixer

生成 Tailwind 和 PostCSS 配置文件
```
npx tailwindcss init -p
```

修改 tailwind.config.js，配置扫描 Laravel 视图文件的路径，确保 Tailwind 能识别模板中的类名

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

在 resources/css/app.css 中引入 Tailwind 核心指令

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

确认 vite.config.js 配置正确（默认生成的配置已包含必要设置，无需额外修改）

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,
        }),
    ],
});