Vue中通过computed动态添加Tailwind子元素样式异常问题

问题场景 #

在Vue3的<script setup>中，通过computed计算属性根据传入的size props，动态给父元素添加嵌套选择器类名（如[&>.avatar]:h-12）来控制子元素.avatar的尺寸。但除huge和gigantic对应的样式外，其他size值的样式仅在DOM中显示，实际不生效；直接写固定类名则能正常工作。

问题代码 #

<script setup lang="ts">
import { computed } from 'vue'
import type { Sizes, Colors as GlobalColors } from '@/types/global/global';
import type {MainColors} from './types'

const props = withDefaults(
  defineProps<{
    size?: Sizes
    color?: GlobalColors
    src?: string
    alt?: string
    width?: number
    height?: number
    text?: string
    status?: MainColors
  }>(),
  {
    size: 'large',
    color: 'primary',
  }
)

const sizes = computed(() => {
    if (props.size === 'tiny') {
      return ['h-4', 'w-4']
    }
    if (props.size === 'small') {
      return ['h-6', 'w-6']
    }
    if (props.size === 'medium') {
      return ['h-8', 'w-8']
    }
    if (props.size === 'big') {
      return ['h-10', 'w-10']
    }
    if (props.size === 'large') {
      return ['h-12', 'w-12']
    }
    if (props.size === 'huge') {
      return ['h-16', 'w-16']
    }
    if (props.size === 'gigantic') {
      return ['h-20', 'w-20']
    }
    else return ''
})
</script>

<template>
  <div
  class="
  flex avatar-group [&>.avatar]:-mr-3"
  :class="`
  [&>.avatar]:${sizes[0]}
  [&>.avatar]:${sizes[1]}`">
    <slot />
  </div>
</template>

原因分析 #

这是Tailwind JIT模式的特性导致：Tailwind会静态扫描项目源代码中的类名，仅生成扫描到的类对应的CSS。动态拼接的类名（如[&>.avatar]:${sizes[0]}）属于动态内容，Tailwind无法提前识别这些组合类，因此不会生成对应的样式规则。而huge和gigantic能生效，大概率是因为项目其他地方直接用到了h-16、w-16、h-20、w-20或对应的嵌套组合类，被Tailwind扫描到并生成了CSS。

解决方案 #

方案1：直接给子元素绑定类（推荐） #

放弃父元素嵌套选择器的方式，改为在slot内的.avatar元素上直接绑定尺寸类。如果.avatar是自定义组件，可将size props传递给它，在组件内部处理样式：

父组件修改

<template>
  <div class="flex avatar-group [&>.avatar]:-mr-3">
    <slot :size="props.size" />
  </div>
</template>

插槽使用示例

<YourAvatarComponent>
  <template #default="{ size }">
    <div :class="getAvatarSizeClasses(size)" class="avatar">...</div>
  </template>
</YourAvatarComponent>

.avatar组件内部处理

<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps<{ size?: Sizes }>()

const avatarSize = computed(() => {
  switch(props.size) {
    case 'tiny': return ['h-4', 'w-4']
    case 'small': return ['h-6', 'w-6']
    case 'medium': return ['h-8', 'w-8']
    case 'big': return ['h-10', 'w-10']
    case 'large': return ['h-12', 'w-12']
    case 'huge': return ['h-16', 'w-16']
    case 'gigantic': return ['h-20', 'w-20']
    default: return []
  }
})
</script>

<template>
  <div :class="avatarSize" class="avatar">...</div>
</template>

方案2：配置Tailwind安全列表 #

若必须通过父元素嵌套选择器实现，可在tailwind.config.js中把所有可能的组合类添加到安全列表，强制Tailwind生成对应CSS：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
  ],
  safelist: [
    '[&>.avatar]:h-4', '[&>.avatar]:w-4',
    '[&>.avatar]:h-6', '[&>.avatar]:w-6',
    '[&>.avatar]:h-8', '[&>.avatar]:w-8',
    '[&>.avatar]:h-10', '[&>.avatar]:w-10',
    '[&>.avatar]:h-12', '[&>.avatar]:w-12',
    '[&>.avatar]:h-16', '[&>.avatar]:w-16',
    '[&>.avatar]:h-20', '[&>.avatar]:w-20',
  ],
  // 其他Tailwind配置...
}

方案3：调整动态类写法（可选） #

将字符串拼接改为数组形式，部分场景下可提升Tailwind扫描识别率（优先级低于前两种方案）：

<template>
  <div
    class="flex avatar-group [&>.avatar]:-mr-3"
    :class="[
      `[&>.avatar]:${sizes[0]}`,
      `[&>.avatar]:${sizes[1]}`
    ]"
  >
    <slot />
  </div>
</template>

内容的提问来源于stack exchange，提问作者Александр Ястребов