Svelte条件类中如何使用名称带斜杠的Tailwind类

Svelte的class:指令在解析类名时，会将未被引号包裹的/、:等特殊字符识别为语法边界，因此直接写入带斜杠的Tailwind类名（如w-1/3）会触发unexpected-token解析错误。

• 类名加引号包裹（适配class指令写法）
  把包含特殊字符的类名用单引号或双引号包裹后，再跟在class:后面即可，这是最符合Svelte指令设计的写法：

  <!-- 错误写法 -->
  <div class:w-1/3={condition}>
  
  <!-- 正确写法 -->
  <div class:'w-1/3'={condition}>
  
  <!-- 带响应式前缀、透明度斜杠的Tailwind类写法完全一致 -->
  <div class:'md:w-1/2'={isMediumScreen} class:'bg-black/50'={showMask}>
  

• 用原生class属性配合条件判断
  如果需要同时拼接固定类、多个条件类，可以直接在原生class属性内写逻辑，不需要依赖class:指令：

  <!-- 单个条件类 -->
  <div class={condition ? 'w-1/3' : ''}>
  
  <!-- 混合固定类+多个条件类，用模板字符串拼接 -->
  <div
    class={`p-3 border rounded ${condition ? 'w-1/3' : 'w-full'} ${isActive ? 'text-white' : 'text-gray-700'}`}
  >
  

  存在大量类名拼接需求时，也可以搭配clsx等类名处理工具简化写法。

内容的提问来源于stack exchange，提问作者François Romain