Laravel Jetstream 中 Tailwind 默认颜色无法编译生效问题

问题根源 #

• 项目中安装的1.x版本DaisyUI默认会覆盖Tailwind的原生默认色板，同时你未在tailwind.config.js中注册DaisyUI并配置兼容规则，导致Tailwind原生的bg-pink-600等默认颜色类不会被编译生成。
• Tailwind JIT模式的本地编译缓存未清理，旧缓存会导致新增的样式类不生效。
• 依赖版本冲突，降级Tailwind版本时未清理旧的依赖文件，导致实际运行版本和预期不符。

解决方案 #

1. 处理DaisyUI兼容（如果需要保留DaisyUI） #

在tailwind.config.js中注册DaisyUI插件，并配置禁用主题色覆盖：

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    mode: 'jit',
    purge: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
        require('daisyui')
    ],
    // 新增DaisyUI配置
    daisyui: {
        themes: false, // 禁用DaisyUI默认主题覆盖Tailwind原生色板
    },
};

如果不需要使用DaisyUI，直接卸载即可：

npm uninstall daisyui

2. 清理缓存重新编译 #

执行以下命令清理旧的依赖和编译缓存，避免版本冲突：

# 删除旧依赖和锁文件
rm -rf node_modules package-lock.json yarn.lock
# 重新安装依赖
npm install
# 清理JIT缓存并启动编译服务
npx mix watch -- --watch-options-poll=1000

3. 校验CSS入口配置 #

确认resources/css/app.css文件中包含完整的Tailwind引入指令：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

完成以上操作后，bg-pink-600等Tailwind默认颜色类即可正常渲染。

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