如何使用Tailwind CSS在各屏幕尺寸下实现完美正圆形头像

我希望使用Tailwind CSS实现带彩色描边的圆形头像效果，要求在大屏、小屏等各类屏幕尺寸下都能保持完美正圆形，不会出现椭圆、边缘不对称的变形问题。

我已知可以通过编写如下自定义CSS，借助radial-gradient实现目标效果：

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

但我严格要求仅使用Tailwind CSS原生能力实现，不能编写额外的自定义CSS类，想确认该方案是否可行。

完全可行，不需要编写任何自定义CSS，用Tailwind自带的原生工具类就能实现，且能保证全尺寸下都是标准正圆：

• 正圆适配核心：给元素加aspect-square类，强制元素宽高比始终为1:1，搭配rounded-full类实现圆形轮廓。不管元素宽度随屏幕尺寸怎么响应式变化，高度都会自动和宽度保持一致，从根源避免手动设宽高、padding模拟正圆带来的亚像素偏差、椭圆变形问题。
• 渐变描边实现：直接用Tailwind的任意值背景语法，把原生径向渐变参数写在工具类里即可，不需要修改tailwind.config.js配置文件。

完整实现代码示例：

<!-- 可根据业务需求调整响应式宽度，比如w-10 md:w-16 lg:w-20，aspect-square会自动适配对应高度 -->
<div class="aspect-square w-12 rounded-full bg-[radial-gradient(circle_closest-side,yellow_calc(100%-2px),#db0100_calc(100%-1px)_99%,transparent_100%)] text-[#db0100] flex items-center justify-center">
  <!-- 头像图标、文字等内容直接放在该容器内即可 -->
</div>

补充说明：

• Tailwind任意值语法中，空格需要用下划线代替，上述渐变写法会被Tailwind原样编译为标准CSS radial-gradient属性，效果和你提供的自定义CSS完全一致
• 如果需要调整描边粗细、填充色、描边色，直接修改渐变代码里的calc偏移值、对应色值即可，不需要新增自定义样式

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