Vue3/Nuxt3中动态绑定Tailwind content类的正确方式是什么？

你遇到的问题是Vue模板语法和Tailwind的content类写法冲突导致的，直接用反引号会让类名无法被Tailwind正确解析，给你几个可行的解决办法：

方法1：转义引号直接绑定 #

把Tailwind content里的内容用单引号包裹，同时在Vue的绑定语法中转义这些单引号，确保类名被正确识别：

<h1 :class="{'after:content-[\':\']': isExpanded}">Hello</h1>

方法2：用数组语法动态切换类 #

这种写法更直观，通过三元表达式判断是否添加目标类：

<h1 :class="[isExpanded ? 'after:content-[\':\']' : '']">Hello</h1>

方法3：提前定义类名（更易维护） #

如果需要绑定的类比较多或者逻辑复杂，可以在script里用计算属性封装：

<script setup>
const isExpanded = true;
const headingClasses = computed(() => {
  return isExpanded ? 'after:content-[\':\']' : '';
});
</script>

<template>
  <h1 :class="headingClasses">Hello</h1>
</template>

补充说明 #

Tailwind的content类要求内容必须用引号包裹（单引号或双引号），但在Vue模板中直接使用双引号会和绑定语法的外层引号冲突，所以优先用转义的单引号。另外，尽量避免在content类里用反引号，Tailwind对反引号的支持不如单引号稳定，这也是你之前写法失效的核心原因。

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