如何用Tailwind CSS为React的JSX评论组件添加垂直间距？

你的space-y-4类未生效的核心原因是评论列表被错误嵌套在<h3>标签内：Tailwind的space-y-*类会给直接子元素添加垂直间距，但你的space-y-4容器的直接子元素是<h3>，而非每个评论的<div>，所以间距无法作用到评论之间。

修改方案： #

1. 移除包裹评论列表的<h3>标签，让comments.map直接成为space-y-4容器的子元素。
2. 若需要显示“评论”标题，单独添加一个<h3>放在评论列表上方。
3. 可微调评论项的内边距，增强视觉层次。

修改后的完整代码： #

<div className="mr-40 ml-40">
  {comments.length > 0 && (
    <div className="bg-slate-600 shadow-lg rounded-lg p-4 space-y-4">
      {/* 可选：添加评论标题 */}
      <h3 className="text-lg font-semibold text-white">评论</h3>
      {comments.map((comment) => (
        <div key={comment.createdAt} className="border-b border-gray-100 py-3">
          <div className="flex justify-between items-center">
            <div className="flex items-center">
              <h3 className="text-black ml-2">{toUpper(comment.name)}</h3>
              <h4 className="text-gray-500 ml-10">{formatDate(comment.createdAt)}</h4>
            </div>
          </div>
          <p className="text-gray-500 dark:text-gray-400 mt-2">{comment.comment}</p>
        </div>
      ))}
    </div>
  )}
</div>

关键调整说明： #

• 移除冗余的<h3>嵌套后，space-y-4会直接给每个评论div添加上方间距，实现预期的垂直分隔效果。
• 给外层容器添加p-4内边距，避免内容紧贴容器边缘，提升视觉舒适度。
• 调整评论项的py-3内边距，配合space-y-4让整体垂直间距更协调。
• 简化内层flex布局的冗余属性，让代码更简洁。

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