Vite+Vue3中Tailwind/UnoCSS动态拼接类名未生效问题

Tailwind 和 UnoCSS 都采用构建期静态扫描的机制生成样式：构建工具会遍历源码文件，匹配所有符合规则的完整类名字符串，最终仅将这些类对应的CSS打包进产物。
字符串模板拼接类名的写法中，完整类名是代码运行到浏览器端才计算得出的，构建阶段扫描器只能读取到space-x-${props.bgSize}这类拆分后的片段，无法匹配到对应样式规则，自然不会生成对应的CSS。哪怕最终DOM里渲染出了完整类名，没有提前生成的CSS规则，样式就无法生效——硬编码space-x-8能正常生效，正是因为这个完整字符串可以被扫描器直接识别。

方案1：通过安全列表（Safelist）预声明动态类 #

这是Tailwind和UnoCSS都原生支持的通用方案，将所有可能动态生成的类名提前写入配置的安全列表，构建时会强制生成这些类的样式，不受源码扫描规则限制。

• Tailwind 配置示例（tailwind.config.js）：

/** @type {import('tailwindcss').Config} */
export default {
  safelist: [
    // 枚举固定类名
    'space-x-4', 'space-x-6', 'space-x-8', 'space-x-12',
    'space-y-4', 'space-y-6', 'space-y-8', 'space-y-12',
    'w-24', 'h-24', '-translate-x-11', '-translate-y-12',
    // 也支持正则批量匹配规则
    { pattern: /space-(x|y)-\d+/ },
    { pattern: /(w|h)-\d+/ },
    { pattern: /-translate-(x|y)-([\d/]+|50%)/ }
  ],
  // 其余原有配置
}

• UnoCSS 配置示例（uno.config.ts）：

import { defineConfig, presetUno } from 'unocss'
export default defineConfig({
  presets: [presetUno()],
  safelist: [
    'space-x-4', 'space-x-6', 'space-x-8',
    // 正则批量匹配
    /^space-(x|y)-\d+$/,
    /^(w|h)-\d+$/,
    /^-translate-(x|y)-[\d/]+$/
  ]
})

方案2：使用完整类名做值映射（推荐） #

避免拆分类名做字符串拼接，提前定义参数值和完整类名的映射关系，保证扫描器能直接识别到源码中写死的完整类名字符串，不会遗漏样式。
代码示例：

<script setup>
const props = defineProps({
  bgSize: {
    type: Number,
    default: 8
  },
  dirHor: Boolean
})

// 映射表中写完整类名，可被扫描器正常识别
const spaceClassMap = {
  4: { x: 'space-x-4', y: 'space-y-4' },
  6: { x: 'space-x-6', y: 'space-y-6' },
  8: { x: 'space-x-8', y: 'space-y-8' },
  12: { x: 'space-x-12', y: 'space-y-12' }
}
const sizeClassMap = {
  24: {
    size: 'w-24 h-24',
    offset: '-translate-x-11 -translate-y-12'
  }
}
</script>

<template>
  <div
    class="absolute rounded-full"
    :class="[
      dirHor 
        ? `flex-row bottom-0 left-1/2 -translate-x-1/2 mb-6 ${spaceClassMap[props.bgSize].x}`
        : `flex-col right-0 top-1/2 -translate-y-1/2 mr-6 ${spaceClassMap[props.bgSize].y}`,
      sizeClassMap[24].size,
      sizeClassMap[24].offset
    ]"
  />
</template>

注意：映射表中的类名必须是完整字符串，不要做二次拆分拼接，否则扫描器依然无法识别。如果动态参数的取值范围有限，优先选这个方案，不会生成冗余的未使用样式，代码可维护性更高。

方案3：UnoCSS可使用运行时模式（仅推荐开发环境） #

UnoCSS提供运行时能力，可在页面运行过程中实时检测DOM中的类名、动态生成对应样式，不需要依赖构建期扫描，但会带来额外的运行时性能开销，不建议生产环境使用，接入方式可参考官方文档。

尽量不要写带复杂运行时计算的动态类名，比如-translate-x-${(24 / 2) - 1}这类逻辑，建议把计算逻辑放到JS中提前处理，最终映射到明确的完整类名上，减少不可预期的样式缺失问题。

内容的提问来源于stack exchange，提问作者Pieter van Stee