Nuxt3+Vue3中传递Props时TailwindCSS样式未生效的问题求助

问题核心在于你定义的classes是普通数组，并非响应式对象，既无法和props同步更新，也不能保证渲染时已完成正确计算。修改方式如下：

修改后的代码 #

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  px: {
    type: String,
    required: false,
  },
  bg: {
    type: String,
    default: 'transparent',
  },
  rounded: {
    type: String,
    default: 'none',
  }
})

// 使用computed计算属性生成响应式类名数组
const classes = computed(() => {
  const cls = ['overflow-hidden']
  for (const [key, value] of Object.entries(props)) {
    if (value !== undefined) {
      cls.push(`${key}-${value}`)
    }
  }
  return cls
})
</script>

<template>
  <div :class="classes">
    <slot></slot>
  </div>
</template>

关键说明 #

• 响应式追踪：computed会自动监听props的变化，每当props更新时，classes会重新计算并同步更新DOM类名，彻底解决样式不生效的问题。
• 渲染时机保障：computed属性会在组件渲染前完成计算，确保DOM渲染时已拿到正确的类名数组，不存在脚本未处理完就渲染的情况。
• 代码简化：把固定类overflow-hidden整合到computed返回的数组中，模板结构更简洁。

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