How to Create a Circle with Text in Tailwind CSS

Creating a circular shape with text centered inside using Tailwind CSS is easy using flexbox and utility classes. This guide will cover different ways to achieve this.

Basic Circle with Text

You can use Tailwind's w- and h- utilities to define the size and rounded-full to make the element a circle.

<div
  class="flex h-20 w-20 items-center justify-center rounded-full bg-blue-500 font-bold text-white"
>
  404
</div>

Custom Width and Height

If you need a larger or smaller circle, use custom values:

<div
  class="flex h-[100px] w-[100px] items-center justify-center rounded-full bg-red-500 text-xl font-bold text-white"
>
  404
</div>

Using Border for Circle

To create a circle with just a border:

<div
  class="flex h-24 w-24 items-center justify-center rounded-full border-4 border-black text-lg font-semibold"
>
  404
</div>

Full Example with Responsive Design

For a responsive circle that scales well on different screen sizes:

<div
  class="flex h-16 w-16 items-center justify-center rounded-full bg-green-500 text-lg font-bold text-white sm:h-24 sm:w-24 md:h-32 md:w-32 md:text-2xl"
>
  404
</div>

Advanced: Positioning Text in a Circle

If you need absolute positioning for different text placements, you can use relative and absolute classes:

<div class="relative flex h-24 w-24 items-center justify-center rounded-full bg-yellow-500">
  <p class="absolute left-1/4 top-1/4 font-bold text-black">404</p>
</div>

FAQs

1. How do I make the text scale with the circle size?

Use text-sm, text-lg, text-xl, etc., or use vw units like text-[5vw] to make it scale dynamically.

2. How do I add an image inside the circle?

Use bg-cover and bg-center for a background image:

<div
  class="h-24 w-24 rounded-full bg-cover bg-center"
  style="background-image: url('your-image-url.jpg')"
></div>

3. How do I create a gradient-filled circle?

Use Tailwind’s gradient utilities:

<div
  class="flex h-24 w-24 items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-green-500 text-white"
>
  Text
</div>