如何配置TailwindCSS在类名提取时保留动态生成的宽度类

Tailwind 按需生成样式的核心逻辑是构建阶段静态扫描源码文件中出现的完整类名，仅会将扫描命中的类打包进最终CSS文件。通过模板字符串拼接动态生成w-1/${n}格式类名的写法，在扫描阶段无法被识别为完整的Tailwind类，对应样式不会被产出，因此无法生效。
在DOM中硬写所有类名的临时方案之所以生效，本质是让扫描器可以读取到这些完整类名，但会产生冗余DOM节点，维护成本高。

方案1：配置Tailwind安全列表（safelist）（全局配置方案） #

直接修改项目根目录的tailwind.config.js，在safelist字段中声明需要强制保留的类，构建时会自动把这些类打包进CSS，不需要在业务代码中额外硬写类名：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}"
  ],
  safelist: [
    // 方式1：逐个列出需要保留的类
    'w-1/1',
    'w-1/2',
    'w-1/3',
    'w-1/4',
    'w-1/5',
    'w-1/6',
    // 方式2：如果需要覆盖更多同规则类，可使用正则匹配所有w-1/开头的宽度类
    // { pattern: /w-1\/\d+/ }
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

配置完成后重启Vite开发服务，动态生成的宽度类即可正常生效。

方案2：类名映射（单组件场景更推荐） #

如果这些动态宽度类只在单个组件中使用，不需要全局配置safelist，可以提前写好完整类名的映射对象。映射对象中的类名都是完整的静态字符串，Tailwind扫描时可以正常识别，不会产生冗余CSS，也不需要额外添加无用DOM：

const array = [1, 2, 3]
// 写死所有可能用到的完整类名，供扫描器识别
const widthClassMap = {
  1: 'w-1/1',
  2: 'w-1/2',
  3: 'w-1/3',
  4: 'w-1/4',
  5: 'w-1/5',
  6: 'w-1/6'
}
const width = computed(() => widthClassMap[array.length])

模板部分不需要额外修改，直接绑定width计算属性即可正常生效。

• 尽量避免通过字符串拼接、模板字符串嵌入变量的方式动态生成Tailwind类名，只要类名没有以完整静态字符串的形式出现在源码中，静态扫描阶段就无法识别，最终会导致样式丢失。
• safelist方案适合类名在全局多组件动态使用的场景，如果仅在单个组件使用，类名映射的方案不会引入未使用的冗余CSS，对产物体积更友好。

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