Tailwind不支持运行时动态换肤，必须用CSS变量承接租户主题色：后端返回配置，前端注入<style>到:root，tailwind.config.js中theme.extend.colors引用var(--primary-color)，并配置safelist和content确保类名不被PurgeCSS删除。
如何用CSS变量注入租户主题色
Tailwind本身不支持运行时动态换肤，必须把主题色提前编译进CSS。最直接的办法是用CSS自定义属性（--primary-color）承接租户配置，再让Tailwind的theme.extend.colors引用这些变量——但注意：Tailwind 3.0+ 不支持在tailwind.config.js里直接引用CSS变量，它们只在构建时求值。
可行路径是：为每个租户生成独立CSS文件，或用JS在页面加载时动态写入:root样式块。推荐后者，轻量且免构建：
- 后端返回租户主题配置（如
{ primary: "#3b82f6", secondary: "#1e40af" }），前端注入到<style id="tenant-theme">:root { --primary-color: #3b82f6; --secondary-color: #1e40af; }</style> - 在
tailwind.config.js中定义扩展颜色：primary: "var(--primary-color)", secondary: "var(--secondary-color)" - 确保
content配置包含所有可能用到该变量的类名（如bg-primary、text-secondary），否则PurgeCSS会删掉对应规则
为什么不能直接用darkMode: 'class'做租户隔离
darkMode: 'class'只控制.dark前缀切换明暗，和租户无关。想靠它区分租户，就得给每个租户加不同class（如tenant-a、tenant-b），但Tailwind默认不支持多级class嵌套生成变体。
硬要这么做，得手动配置variants（v2）或plugins（v3），代价高且易冲突。更实际的做法是：用CSS变量 + JS切换:root，或为关键组件封装tenant-theme class，再用@layer components写租户专属样式块。
立即学习“前端免费学习笔记（深入）”；
- 避免用
.tenant-a .btn这种后代选择器，优先用.btn.tenant-a——Tailwind的addVariant能轻松支持 - 若租户数少（≤5），可直接在
tailwind.config.js里用for循环生成tenantA/tenantB变体；租户数多就别这么干，CSS体积会失控
如何避免PurgeCSS误删租户相关类名
当租户主题类名（如bg-tenant-x）是运行时拼接的，PurgeCSS扫描HTML/JS时根本看不到，直接删光。
- 在
tailwind.config.js的content数组里显式加入租户配置文件路径（如./src/tenants/*.js），或把所有可能的类名列在safelist中：[/^bg-tenant-/, /^text-tenant-/] - 不要用
eval()或className={`bg-${tenant.id}`}这种纯字符串拼接，改用映射表：const themeClasses = { a: "bg-tenant-a text-tenant-a", b: "bg-tenant-b text-tenant-b" } - 如果用React/Vue，确保JSX模板或模板字符串被
content正确覆盖，比如Vite项目需加**/*.{jsx,tsx,vue}
字体与图标资源怎么按租户加载
Tailwind的fontFamily配置是静态的，无法根据租户动态切字体。真正要换字体，得靠CSS的@font-face + font-family变量，再配合租户class切换。
- 租户字体文件由CDN按ID分发（如
https://fonts.example.com/tenant-a/inter.woff2），JS加载完后注入@font-face规则 - 图标同理：不要用全局
@layer utilities定义所有图标，而是用data-icon属性 + CSS属性选择器，或按租户加载不同icon.css - 务必设置
font-display: swap，避免租户字体加载阻塞首屏渲染
白标真正的难点不在Tailwind配置，而在资源加载时机和CSS作用域隔离——变量泄漏、字体FOIT、图标闪动，都是比配色更难收敛的问题。
