Laravel Jetstream Livewire部署后Tailwind CSS无法加载求助

核心问题定位 #

你遇到的问题根源是Laravel 9及以后版本默认使用Vite替代了Mix，所以用{{ mix('css/app.css') }}会触发404；另外welcome.blade.php默认的内联样式是Laravel初始模板自带的，和Jetstream的Tailwind样式体系不兼容。

具体解决步骤 #

1. 替换资源引入方式为Vite指令 #

打开resources/views/welcome.blade.php，删除原有的内联样式块，替换为Vite的资源引入代码：

<head>
    <!-- 保留原有meta标签 -->
    <title>Laravel</title>
    {{-- 替换原mix或内联样式 --}}
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Vite会自动读取public/build/assets下编译后的带哈希值的资源文件，无需手动拼接文件名。

2. 检查.env中的APP_URL配置 #

确保APP_URL和你的子域名完全一致，例如：

APP_URL=https://subdomain.yourdomain.com

Vite的资源生成路径依赖该配置，不一致会导致资源路径错误。

3. 清除Laravel缓存和浏览器缓存 #

执行以下命令清除框架缓存：

php artisan cache:clear
php artisan config:clear
php artisan view:clear

同时在Chrome中按Ctrl+Shift+R强制刷新页面，清除浏览器缓存。

4. 验证Plesk的文件权限 #

确保public/build目录及子文件的权限设置正确：

• 所有者设为Plesk的web用户（通常是www-data或对应域名的系统用户）
• 目录权限设为755，文件权限设为644
  可通过Plesk文件管理器右键修改权限，或SSH执行：

chown -R www-data:www-data public/build
chmod -R 755 public/build
chmod 644 public/build/assets/*

5. 重新编译资源（可选） #

若以上步骤无效，重新执行编译命令：

npm install
npm run build

确保编译过程无报错，完成后public/build/assets下会生成最新的app-*.css和app-*.js文件。

额外建议 #

如果需要让welcome.blade.php和Jetstream布局保持一致，可直接继承Jetstream的基础布局：

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            Welcome
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <!-- 自定义页面内容 -->
        </div>
    </div>
</x-app-layout>

这样会自动继承Jetstream的样式和布局结构，无需手动引入资源。

内容的提问来源于stack exchange，提问作者Subnom