Vue项目集成TailwindCSS/FlowbiteVue报错：未知工具类rounded-r-lg

• 确保Tailwind扫描到Flowbite-Vue的组件文件
  Tailwind CSS是按需生成工具类的，只有在content配置路径下的文件中检测到类名，才会生成对应的样式。你需要在tailwind.config.js里把Flowbite-Vue的组件目录加入扫描范围：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./index.html",
      "./src/**/*.{vue,js,ts,jsx,tsx}",
      "./node_modules/flowbite-vue/**/*.{vue,js,ts,jsx,tsx}" // 新增这行
    ],
    theme: {
      extend: {},
    },
    plugins: [
      require('flowbite/plugin') // 确保已引入Flowbite插件
    ],
  }
  

• 调整CSS引入顺序
  在main.css中，先加载Tailwind的基础样式，再引入Flowbite-Vue的CSS，避免样式加载顺序导致的类未生成问题：

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  
  @import '../../node_modules/flowbite-vue/dist/index.css';
  

• 强制生成目标类名
  如果上面的方法无效，可以在Tailwind配置的safelist中手动指定要生成的类，强制Tailwind输出rounded-r-lg：

  module.exports = {
    // ...其他配置
    safelist: [
      'rounded-r-lg'
    ]
  }
  

• 验证Tailwind与Flowbite-Vue版本兼容性
  确认你使用的Tailwind CSS是v3.x版本，Flowbite-Vue通常基于Tailwind v3开发，旧版本（如v2.x）可能存在类名或功能差异，导致无法识别rounded-r-lg这类v3标准类。

内容的提问来源于stack exchange，提问作者dennis_10-33