如何使用TailwindCSS实现iframe的圆角效果？

当然可行，问题出在父容器的圆角不会自动裁剪子元素的溢出内容，你的iframe会超出父容器的圆角范围，所以看不到预期效果。

解决方法很简单，给父容器添加overflow-hidden类即可：

<div className="aspect-w-16 aspect-h-9 rounded-lg bg-red-800 overflow-hidden">
  <iframe
    src="https://www.youtube.com/embed/r9jwGansp1E"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen
  ></iframe>
</div>

原理是overflow-hidden会将父容器内超出边界的内容裁剪掉，这样iframe就会被父容器的圆角限制，显示出圆角效果。

另外也可以直接给iframe添加rounded-lg类，但因为YouTube播放器本身可能存在默认的边缘区域，通过父容器裁剪的方式兼容性和效果会更稳定。

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