Symptom
Shared UI components look fine, but your own className utilities (flex, gap-4, bg-*, text-*) have no effect in the plugin screen.
Why this happens
Plugin screens run inside the base frontend. Tailwind only emits CSS for class names it finds in configured content paths. If the host never scans your plugin sources (or you build classes dynamically), those utilities are purged.
- Base frontend tailwind content globs omit plugins/<name>/frontend/src/**
- Dynamic class strings (e.g. `bg-${color}-500`) are invisible to the scanner
- You edited styles but the base frontend CSS bundle was not rebuilt
- Typos / non-existent utilities — Tailwind silently drops unknown classes
Fix
- In the base frontend Tailwind config, include plugin source globs such as ../../plugins/*/frontend/src/**/*.{ts,tsx,js,jsx}
- Also include installed plugin UI if your template scans installed-plugins — keep both source and runtime paths consistent with your stack
- Use full class names in source (cn("bg-red-500", condition && "hidden")) — do not interpolate utility fragments
- Restart / rebuild the base frontend after changing Tailwind content paths
- Prefer @quan-erp/shared-ui primitives + cn from @quan-erp/shared-ui for composed classes
- For portaled overlays, follow Portal Styling (data-plugin) so theme/CSS variables still apply
Verify
- Add a unique utility (e.g. outline-dashed outline-2) on a plugin element
- Rebuild watch + hard-refresh; inspect the element — the utility should appear in computed styles
- If shared-ui Button styles work but your utilities do not, the content-path / purge issue is confirmed