Tailwind css中带有文本的圆圈

Posted 2023-03-07

【中文标题】Tailwind css中带有文本的圆圈

【英文标题】：Circle with text in Tailwind css

【发布时间】：2021-02-02 02:48:16

【问题描述】：

我是初学者网络开发人员。 我对 Tailwind CSS 有小问题。我需要这个：https://ibb.co/KL8cDR2

这是我的代码：

<div class="w-1/2 h-10 rounded-full bg-gray-400" style="background-color:red">404</div>

但它不起作用:(我怎样才能做到？ 请帮帮我

【问题讨论】：

这是您的期望吗？ codepen.io/Maniraj_Murugan/pen/OJXXQWB

【参考方案1】：

位置绝对方式：

<div class="rounded-full border-2 flex p-3 relative">
    <div class="absolute top-5 left-8">
        4
     </div>
</div>

在tailwind.config.js 中扩展插入

theme: 
  inset: 
     '5': '5px',
     '8': '8px'
   

弹性方式：

 <div class="w-20 h-20 rounded-full flex justify-center items-center">
       <p>404</p>
 </div>

【参考方案2】：

 <div class="font-bold text-gray-700 rounded-full bg-white flex items-center justify-center font-mono" style="height: 500px; width: 500px; font-size: 170px;">404</div>

这应该可以完成工作。确保添加一个自定义类来定义圆的高度和宽度以及字体大小，并从类中删除 font-mono 并添加您想要的字体。