Alpine.js类绑定问题：服务端渲染初始类无法移除

问题本质 #

Alpine.js的:class绑定默认是追加/切换绑定表达式内的类，不会主动处理元素上已存在的静态class。当服务端预先渲染了bg-pink-900 text-white，而动态绑定的三元表达式仅在条件不满足时返回bg-gray-100，Alpine只会添加灰色类，不会移除静态的粉色类，导致样式冲突。

解决方案：使用对象语法的:class绑定 #

通过对象语法明确指定每个类的启用状态，让Alpine完全控制这些类的添加/移除，不管元素初始是否有这些静态class。

修改后的代码：

<li id="123"
    class="bg-pink-900 text-white"
    :class="{
        'bg-pink-900 text-white': $el.id === activeId,
        'bg-gray-100': $el.id !== activeId
    }">Foo</li>

原理说明 #

对象语法中，每个键是要控制的类名，值是布尔表达式：

• 当$el.id === activeId为true时，Alpine会确保bg-pink-900 text-white存在（即使静态class已经有，也不会重复添加）
• 当表达式为false时，Alpine会主动移除bg-pink-900 text-white，同时添加bg-gray-100

这种方式彻底解决了静态class和动态绑定的冲突，同时保留了SSR首屏的正确样式，Alpine初始化后会自动同步到正确的状态。

替代方案：移除静态class，让Alpine初始化匹配SSR状态 #

如果不需要保留静态class的冗余写法，也可以直接移除静态class，仅保留动态绑定：

<li id="123"
    :class="$el.id === activeId ? 'bg-pink-900 text-white' : 'bg-gray-100'">Foo</li>

但这种方式需要确保Alpine的activeId初始值和SSR渲染时的逻辑完全一致，否则会出现首屏样式闪烁（SSR渲染粉色，Alpine初始化后改成灰色，或者反之）。

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