Tailwind 中带有文字的圆圈 css

Question

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

这是我的代码：

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

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

Answer 1

 <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>

这应该可以完成工作。确保添加定义圆的高度和宽度的自定义 class 以及 font-size 并从 classes 中删除 font-mono 并添加您想要的字体。

Answer 2

位置绝对方式：

<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>

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
   <div class="w-20 h-20 rounded-full border-2 border-black flex justify-center items-center">
       <p>404</p>
 </div>
</body>
</html>

Answer 3

您可以通过像素或其他方式以这种方式使用宽度和高度

<div class="w-[200px] h-[200px] bg-red rounded-full flex 
 justify-center items-center">
   <p>404</p>
</div>

Tailwind 中带有文字的圆圈 css

Circle with text in Tailwind css

css

tailwind-css