演示

插件中 Tailwind 无效

插件前端里的 Tailwind 工具类没有样式——间距、颜色和布局看起来像未设置样式。

现象

共享 UI 组件正常，但你自己的 className 工具类（flex、gap-4、bg-* 等）没有效果。

原因

插件界面运行在 base 前端中。Tailwind 只会为 content 路径中扫描到的类名生成 CSS；未扫描到或动态拼接的类会被清除。

  • Base 前端 Tailwind content 未包含 plugins/<name>/frontend/src/**
  • 动态类名（如 `bg-${color}-500`）扫描不到
  • 改了样式但未重建 base 前端 CSS 包
  • 拼写错误 / 不存在的工具类会被静默丢弃

处理

  • 在 base 前端 Tailwind 配置中加入 ../../plugins/*/frontend/src/**/*.{ts,tsx,js,jsx}
  • 若模板扫描 installed-plugins，保持源码与运行时路径一致
  • 在源码中写完整类名（cn("bg-red-500", condition && "hidden")），不要拼接工具类片段
  • 修改 content 路径后重启 / 重建 base 前端
  • 优先使用 @quan-erp/shared-ui 与 cn
  • Portal 浮层遵循 Portal Styling（data-plugin）
cn →Portal Styling →

验证

  • 在插件元素上加一个独特工具类（如 outline-dashed）
  • watch + 强制刷新后检查计算样式
  • 若 shared-ui 正常而自定义工具类无效，即可确认是 content 路径 / purge 问题