从Bootstrap迁移至Tailwind CSS遇背景色类被清除问题求助

你的问题核心是错误使用了Tailwind不支持的颜色类名，同时还有可优化的配置点，具体解决步骤如下：

1. 修正错误的颜色类名 #

Tailwind默认配色体系里，黑色对应的类是bg-black（纯黑）或灰度色系的bg-gray-900（深灰），不存在bg-black-500这个类。替换掉错误类名即可：

修改后的App.jsx：

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
     <div className="grid grid-cols-3">
       <div className='bg-black'>hi 1</div> {/* 修正为合法的黑色类 */}
       <div className='bg-red-500'>hi</div>
       <div className="bg-green-500">hi</div>
     </div>
    </>
  )
}

export default App

2. 清理不必要的safelist配置 #

safelist是用来强制生成动态生成、无法被扫描工具检测到的类名，你代码里的颜色类都是静态写在组件里的，完全不需要加到safelist中，删掉这部分避免冗余：

修改后的tailwind.config.js：

export default {
  content: [
    './index.html',
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 验证基础配置正确性 #

确认以下现有配置无问题（你的代码已符合要求，此处用于二次校验）：

• index.css中必须按顺序包含Tailwind核心指令：

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

• postcss.config.cjs正确引入插件：

  module.exports = {
    plugins: [
      require('tailwindcss'),
      require('autoprefixer'),
    ],
  };
  

最后验证 #

重启Vite开发服务器，刷新页面后背景色即可正常显示。若仍有问题，检查开发者工具样式面板，看是否有Bootstrap残留样式覆盖Tailwind规则，可临时用!bg-black提升优先级排查，或彻底清理Bootstrap残留文件。

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