SvelteKit+Tailwind元素样式多条件叠加实现问题求助

你当前写法的问题主要是字符串拼接时缺少空格（导致不同class连写无法识别），同时代码存在未闭合的语法错误。下面是几种可靠的实现方式：

方式一：模板字符串+空格分隔 #

用模板字符串包裹动态class，每个条件样式前预留空格，即使某个条件不生效，也不会出现class连写的情况：

<input class="{
  isCompact 
    ? `${img !== null ? 'pr-5' : 'pr-2'} ${isDisabled ? 'bg-gray-100' : ''}`
    : `${img !== null ? 'pr-7' : 'pr-4'} ${isDisabled ? 'bg-gray-200' : ''}`
}"

方式二：数组过滤空值（扩展性更强） #

把所有动态class放到数组中，过滤掉空字符串后用空格拼接，后续添加更多条件时更方便维护：

<input class="{
  [
    isCompact ? (img !== null ? 'pr-5' : 'pr-2') : (img !== null ? 'pr-7' : 'pr-4'),
    isDisabled ? (isCompact ? 'bg-gray-100' : 'bg-gray-200') : ''
  ].filter(Boolean).join(' ')
}"

方式三：拆分逻辑到变量（可读性最高） #

如果后续条件会更复杂，建议把class计算逻辑提前放到脚本变量里，让模板更简洁：

// 组件脚本部分提前计算class
const getInputClasses = () => {
  const paddingClass = isCompact 
    ? (img !== null ? 'pr-5' : 'pr-2') 
    : (img !== null ? 'pr-7' : 'pr-4');
  const disabledClass = isDisabled 
    ? (isCompact ? 'bg-gray-100' : 'bg-gray-200') 
    : '';
  return [paddingClass, disabledClass].filter(Boolean).join(' ');
}

模板中直接调用：

<input class="{getInputClasses()}"

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