Vue中使用computed替代模板字符串生成Tailwind类的可扩展写法

模板字符串拼接 `text-${props.textSize}` 不生效，核心是Tailwind的构建机制是静态扫描源码中完整书写的类名，动态拼接生成的字符串不会被扫描识别，最终打包产物里根本没有对应类的CSS规则，自然无法生效。长串三元嵌套的写法虽然可以运行，但每新增一个尺寸选项就要加一层判断，维护成本很高，扩展性差。

方案1：常量映射表（最推荐，适配所有动态类场景） #

提前把所有支持的属性值和对应Tailwind类存在独立的映射对象中，后续新增配置只需要往映射表里加键值对，不需要修改核心逻辑：

// 尺寸类映射表，后续新增尺寸直接在这里加行配置即可
const SIZE_CLASS_MAP = {
  xs: 'text-xs',
  sm: 'text-sm',
  base: 'text-base',
  lg: 'text-lg',
  xl: 'text-xl',
  '2xl': 'text-2xl',
  '3xl': 'text-3xl',
} as const

// 计算属性只负责取值，加默认兜底防止传入非法值
const textSize = computed(() => {
  return SIZE_CLASS_MAP[props.textSize] ?? SIZE_CLASS_MAP.base
})

如果使用TS，可以直接基于映射表推导props类型，从根源避免传错参数：

// 先从vue导入PropType
import type { PropType } from 'vue'

type TextSizeType = keyof typeof SIZE_CLASS_MAP

// props中修改textSize的配置
textSize: {
  type: String as PropType<TextSizeType>,
  default: "base",
},

这个方案的优势：

• 所有类名都是完整书写的静态字符串，Tailwind扫描时100%识别，不会出现样式丢失问题
• 配置和逻辑完全分离，后续扩展只需要修改映射表，不需要动计算属性和模板逻辑
• 类型安全，传非法参数时TS会直接报错

你组件里其他零散的动态类判断，比如圆角、边框宽度、字体粗细等，都可以用同样的方式抽成独立映射表，不用在模板里堆大量三元判断，后续新增属性配置的成本极低。

方案2：构建安全列表配置（适合规则固定的批量动态类场景） #

如果你的动态类都是「固定前缀+固定枚举值」的规则，可以直接在Tailwind配置文件里加安全列表，构建时强制把这些类打包进产物，这样你最开始写的模板字符串拼接写法就可以直接生效：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
  safelist: [
    // 按正则匹配需要强制打包的类
    { pattern: /text-(xs|sm|base|lg|xl|2xl|3xl)/ },
    // 后续其他动态类比如圆角、颜色都可以按规则加
    // { pattern: /rounded-(sm|md|lg|full)/ },
    // { pattern: /bg-(gray|red|blue)-(100|500|900)/ }
  ]
}

配置完成后，原有的动态拼接写法可以直接运行：

const textSize = computed(() => `text-${props.textSize}`)

这个方案的缺点是会把配置的所有类都打进最终产物，即使你实际没用到，会轻微增加包体积，灵活度不如映射表方案，适合类名规则高度统一的场景。

内容的提问来源于stack exchange，提问作者juzello