使用 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 CSS 有一个利用“纵横比”属性的类。

（更多信息： https ://tailwindcss.com/docs/aspect-ratio）

您的 HTML 可能如下所示：

<div class="avatar aspect-square rounded-full"></div>

“aspect-square”将使元素始终为正方形。 "rounded-full" 将使用边界半径使正方形成为圆形。

这两个类都在 Tailwind CSS 中可用。

如果您还没有，您的图标头像可能需要定义高度或宽度，以确保它们的大小相互匹配。

Answer 2

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

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

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

希望这可以帮助。