React项目中TailwindCSS颜色样式失效问题求助

问题根源 #

你在tailwind.config.cjs的theme.colors中定义了空对象{}，这会完全覆盖Tailwind默认的颜色预设体系，导致所有内置颜色类（比如text-sky-400、from-cyan-500）无法被识别编译，自然不会生效。

修复方案 #

根据需求选择以下两种处理方式：

方式1：保留默认颜色，仅添加自定义字体（推荐） #

如果只是想新增自定义字体，不需要修改默认颜色，直接删除空的colors: {}配置即可，Tailwind会自动保留所有内置颜色：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    fontFamily: {
      serif: ["Cormorant"],
    },
    extend: {},
  },
  plugins: [],
};

方式2：自定义颜色并保留默认颜色 #

如果需要添加专属颜色同时保留Tailwind默认色，要把自定义颜色写在theme.extend.colors下，而非直接覆盖theme.colors：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    fontFamily: {
      serif: ["Cormorant"],
    },
    extend: {
      colors: {
        // 示例：添加自定义主色
        primary: '#ff4400',
      },
    },
  },
  plugins: [],
};

验证步骤 #

1. 保存修改后的配置文件
2. 重启开发服务器（若热重载未自动生效）
3. 刷新浏览器，颜色样式即可正常显示

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