Laravel+Vite环境下Tailwind默认颜色无法覆盖的求助

开发者阿泽

2026-6-14

解决Laravel+Vite环境下Tailwind CSS v4无法覆盖默认颜色的问题

核心原因

你当前使用的是Tailwind CSS v4，这个版本的配置逻辑与v3差异很大，你沿用了v3的写法，导致颜色覆盖不生效。

修复步骤

1. 调整Tailwind配置文件（tailwind.config.js）

在v4中，要覆盖默认颜色不能放在theme.extend里，需要直接在theme.colors层级定义。如果只想覆盖单个颜色（比如black），需要先展开默认颜色集，再覆盖目标颜色：

import defaultTheme from 'tailwindcss/defaultTheme';

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
  ],
  theme: {
    fontFamily: {
      sans: ['Figtree', ...defaultTheme.fontFamily.sans],
    },
    // 直接在theme.colors下定义，先保留默认颜色再覆盖black
    colors: {
      ...defaultTheme.colors,
      black: "#060606",
    },
  },
  plugins: [],
};

2. 修正CSS入口文件（app.css）

Tailwind v4不再需要@import "tailwindcss"，改用标准的Tailwind指令，同时@source可以移除（因为你已经在config的content里指定了文件路径）：

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

3. 简化PostCSS配置（postcss.config.js）

Tailwind v4的@tailwindcss/postcss插件已经内置了autoprefixer功能，无需单独配置，避免冲突：

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

4. 确保Vite配置正确（vite.config.js）

需要在Vite配置中注册@tailwindcss/vite插件，否则Tailwind无法正常编译：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwind from '@tailwindcss/vite';

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