Tailwind CSS颜色样式未生效，自定义颜色无法使用求助

核心问题分析 #

你遇到的问题根源有两个：

• 自定义颜色配置和实际使用的类名不匹配
• 直接覆盖theme.colors导致默认颜色类被清除

具体修复步骤 #

1. 匹配自定义颜色类名

你在tailwind.config.js里定义的blue颜色只有medium这个变体，但按钮代码里用的是bg-blue-500——这个类在你的自定义配置里根本不存在，因为你完全替换了默认的颜色集合。

把按钮的样式改成对应自定义颜色的类名：

className={`bg-blue-medium text-black-light w-full rounded h-8 font-bold 
            ${isInvalid && 'opacity-50'}`}

注意：你自定义的black.light值和blue.medium都是#005c98，这会导致文字和背景色一致，建议修正black.light的色值。

2. 保留默认颜色并扩展自定义色

如果想同时用Tailwind默认颜色（比如blue-500）和自定义颜色，不要直接覆盖theme.colors，改用theme.extend.colors来扩展：
修改tailwind.config.js：

const colors = require('tailwindcss/colors')

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
    './index.html'
  ],
  theme: {
    extend: {
      colors: {
        blue: {
          medium: '#005c98'
        },
        black: {
          light: '#333333', // 修正为合理的浅黑色
          faded: '#00000059'
        },
        gray: {
          base: '#616161',
          background: '#fafafa',
          primary: '#dbdbdb'
        }
      }
    }
  }
};

这样默认的bg-blue-500等类会被保留，自定义的bg-blue-medium也能正常生效。

3. 额外验证项

• 确认content路径正确：你的页面、组件文件确实在配置的目录下，Tailwind需要扫描这些文件生成对应的样式类，路径错误会导致样式不生成。
• 检查构建流程：确保执行了PostCSS构建命令（比如postcss input.css -o output.css），并且项目正确引入了生成的CSS文件。

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