如何用Tailwind CSS将小图片设为圆形并对齐文本容器？

要实现你想要的圆形头像+文本对齐效果，只需调整几个Tailwind类即可：

• 修正图片容器宽度：删除图片外层div的w-full类，避免它占满整行挤压文本区域
• 实现垂直对齐：给最外层flex容器添加items-center类，让图片和文本垂直居中对齐
• 清理图片冗余样式：去掉img标签中重复的w-full类，保证图片维持h-10 w-10的尺寸并显示为圆形
• 优化文本容器布局：给p标签添加flex-1 ml-2类，让文本占据剩余空间，同时和图片保持合理间距

修改后的完整代码：

<div className='flex items-center justify-between w-full'>
   <div className='px-1'>
       <img
         src='https://images.unsplash.com/photo-1566275529824-cca6d008f3da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8cGhvdG98ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=800&q=60'
         alt='Pic'
         className='h-10 w-10 rounded-full border-2'
        />
   </div>
   <p className='flex-1 ml-2 border-2'>
       <span className='text-lg font-semibold'>dottt</span>  
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
   </p>
</div>

调整后图片会保持圆形样式，同时与文本容器实现完美的垂直对齐，效果和你参考的示例一致。

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