Laravel项目中Vite无法识别Tailwind CSS类的问题求助

我在Laravel项目中使用Tailwind CSS，但编写w-100这类类时出现以下错误：

[vite:css] [postcss] C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\resources\css\app.css:4:1: The w-100 class does not exist. If w-100 is a custom class, make sure it is defined within a @layer directive.
file: C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\resources\css\app.css:4:1
error during build:
CssSyntaxError: [postcss] C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\resources\css\app.css:4:1: The w-100 class does not exist. If w-100 is a custom class, make sure it is defined within a @layer directive.
at Input.error (C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\node_modules\postcss\lib\input.js:148:16)
at AtRule.error (C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\node_modules\postcss\lib\node.js:60:32)
at processApply (C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\node_modules\tailwindcss\lib\lib\expandApplyAtRules.js:357:29)
at C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\node_modules\tailwindcss\lib\lib\expandApplyAtRules.js:505:9
at C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\node_modules\tailwindcss\lib\processTailwindFeatures.js:55:50
at plugins (C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\node_modules\tailwindcss\lib\index.js:38:63)
at LazyResult.runOnRoot (C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\node_modules\postcss\lib\lazy-result.js:339:16)
at LazyResult.runAsync (C:\Users\eymen\OneDrive\Desktop\work\websites\elnaj7\node_modules\postcss\lib\lazy-result.js:393:26)
at async compileCSS (file:///C:/Users/eymen/OneDrive/Desktop/work/websites/elnaj7/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:44551:25)
at async Object.transform (file:///C:/Users/eymen/OneDrive/Desktop/work/websites/elnaj7/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:44055:55)

项目相关配置如下：

布局文件（精简版） #

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    @vite(['resources/css/app.css'])

    <link rel="stylesheet" href="{{ asset('css/app.css') }}"> <!--当我移除这一行时，所有Tailwind基础样式都会消失-->
    <!-- styles -->
    @yield('styles')
    <!-- Head Scripts -->
    @yield('head-scripts')
</head>
<body>
    <div id="app">
        @yield('content')
    </div>
</body>
</html>

vite.config.js 配置 #

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

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

tailwind.config.js 配置 #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './resources/views/auth/**/*.blade.php',
    './resources/views/errors/**/*.blade.php',
    './resources/views/layouts/**/*.blade.php',
    './resources/views/user/**/*.blade.php',
    './storage/framework/views/*.php',
  ],
  theme: {
  },
  plugins: [],
}

此前尝试过不通过Vite运行Tailwind，生成了部分类但问题较多，现已切换回Vite。

解决方案 #

1. 修正Tailwind类名 #

Tailwind CSS没有内置w-100类：

• 如果需要宽度100%，直接用内置类w-full替换w-100
• 如果确实需要自定义w-100（比如宽度100px），在resources/css/app.css中通过@layer指令定义：

@layer utilities {
  .w-100 {
    width: 100px;
  }
}

2. 修复资源引入重复问题 #

布局中同时用@vite和asset()引入app.css是错误用法：

• @vite会自动加载Vite编译后的带哈希的资源文件，是正确的引入方式
• 直接用asset('css/app.css')加载的是未编译的源文件，这就是移除后样式消失的原因

解决步骤：

1. 删除<link rel="stylesheet" href="{{ asset('css/app.css') }}">这一行
2. 确保resources/css/app.css包含Tailwind核心指令：

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

3. 完善Tailwind视图扫描范围 #

修改tailwind.config.js的content配置，确保覆盖所有使用Tailwind类的视图文件：

content: [
  './resources/views/**/*.blade.php', // 覆盖所有视图文件，更简洁
  './storage/framework/views/*.php',
],

4. 清理缓存并重新编译 #

执行以下命令清理缓存并重新构建资源：

# 清理Laravel视图缓存
php artisan view:clear

# 生产环境编译资源
npm run build

# 开发环境启动热更新
npm run dev

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