React拆分字符串传字符到组件时Tailwind flex布局空格不显示如何解决？

问题原因 #

这个问题既不是Tailwind使用错误，也不是JS逻辑错误，是HTML默认的空白字符折叠规则+flex布局特性共同导致的：

• 普通空格字符放在空div中时，HTML默认会折叠空白，且flex布局下无内容/仅含空格的子项会被计算为0宽度，所以看不到空格展示
• 不使用flex时字符垂直排列，是因为Character组件返回的是div块级元素，默认独占一行

修复方案 #

推荐优先从组件层统一处理空白渲染问题，修改Character组件代码如下：

const Character = (props) => {
    return(
        <div className="bg-green-100 whitespace-pre min-w-[1ch] text-center">
            {props.children}
        </div>
    )
}

export default Character;

新增的三个类作用分别是：

• whitespace-pre：对应CSS规则white-space: pre，强制保留空白字符，不会被折叠
• min-w-[1ch]：给单个字符设置最小宽度为1个字符宽度，保证空格也能占据和普通字符一致的展示空间，不会被flex布局压缩为0宽度
• text-center：可选，让所有字符居中对齐，视觉更统一

如果不想修改组件代码，也可以在外层遍历的时候对空格做特殊处理，替换为非折叠空白符：

return(
  <div className="w-3/4 flex flex-wrap">
      {apiResponse.split('').map(function(char, index){
        return <Character key={index}>{char === ' ' ? '\u00A0' : char}</Character>;
    })}
  </div>
)

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