安装Flowbite后Tailwind CSS边框失效及Dividers颜色丢失求助

你的组件结构如下：

<div className="bg-gray-800 border border-gray-700 rounded-lg">
  ....
</div>

安装Flowbite后出现边框、分割线颜色失效的问题，给你几个实用的解决办法：

• 检查Tailwind配置文件：打开tailwind.config.js，确认Flowbite已正确引入，且未覆盖Tailwind默认的灰色体系。重点确保content数组包含Flowbite的组件文件，theme部分也不要重置gray变量：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/flowbite/**/*.js" // 必须包含该行
  ],
  theme: {
    extend: {
      // 除非自定义需求，否则不要在这里覆盖gray颜色
    },
  },
  plugins: [
    require('flowbite/plugin')
  ],
}

• 用具体颜色类替代命名类：如果Flowbite样式覆盖了Tailwind的命名颜色，直接改用十六进制颜色类，比如把border-gray-700换成border-[#374151]（这是Tailwind默认gray-700的色值），分割线同理用divide-[#374151]。

• 给分割线补加颜色类：Flowbite自带的分割线组件默认样式偏浅，在深色背景下容易看不见。直接给分割线元素额外加颜色类，比如<hr className="border-gray-700">即可。

• 确认深色模式配置：如果项目用了深色模式，检查Tailwind的深色模式是否设为class模式，且根元素已加上dark类，确保深色样式正常加载。

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