使用 Tailwind Css 在每个屏幕尺寸上保持完美的圆形十字

Question

我想使用Tailwind Css为大屏幕和小屏幕上显示的图标头像保持完美的圆形。

我确实知道我可以使用这样的渐变径向：

.avatar{
  background: radial-gradient(circle closest-side, 
      yellow calc(100% - 2px),#db0100 calc(100% - 1px) 99%,transparent 100%);
  color: #db0100;
}

但我真的想使用 Tailwind。是否可以？谢谢。

Answer 1

使用 Tailwind 可以相当轻松地做到这一点。您需要使用rounded-full,grow-0和创建一个 div shrink-0。除此之外，您还需要设置宽度和高度。将增长和收缩设置为 0 意味着 div 不会调整大小，即使浏览器需要更多空间来容纳其他元素。

<div class="w-11 h-11 shrink-0 grow-0 rounded-full bg-green-300 text-green-700">Content</div>

我在 Tailwind Play 中为你做了一个例子。

希望这可以帮助。