Nuxt3 SSR中Tailwind动态类传递给子组件失效问题求助

问题场景 #

在 Nuxt 3 SSR 项目中使用 Tailwind CSS，通过 props 向子组件传递动态类时出现样式不生效的问题：

• 父组件调用：<section-latest-news :count="12" :columns="4" />
• 子组件尝试基于 columns 属性渲染列，模板写法：:class="grid gap-5 md:grid-cols-${columns}"
• 现象：开发者工具中能看到生成的类名（如 md:grid-cols-3），但对应样式未生效；手动写死类名则样式正常，排除 CSS 布局本身的问题，推测和 SSR 生命周期有关。

解决方案 #

通过计算属性预生成对应的 Tailwind 类名，避免动态拼接类名导致的 SSR 样式丢失问题：

计算属性代码 #

const columnsCount = computed(() => {
    return props.columns === 3 ? 'md:grid-cols-3' : 'md:grid-cols-4'
})

模板使用代码 #

<div class="grid gap-5" :class="columnsCount">
    <div v-for="post in posts" :key="post.id" class="md:mb-0">
      <post-card-image :post="post" />
    </div>
</div>

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