Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a circle with text in Tailwind CSS?
In this article, we will learn how to create a circular element with text inside using Tailwind CSS. Tailwind CSS is a utility-first CSS framework that allows for fast UI development with pre-built classes.
Prerequisites: You need to have Tailwind CSS included in your project. You can add it via CDN by including this link in your HTML head section:
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
Basic Circle with Text
To create a circle with text, we use Tailwind's utility classes for width, height, background, border-radius, and flexbox centering
<!DOCTYPE html>
<html lang="en">
<head>
<title>Circle with Text</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="flex items-center justify-center h-screen bg-gray-100">
<div class="w-32 h-32 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold">
Hello
</div>
</body>
</html>
A blue circular element with white "Hello" text centered inside appears on the page.
Key Tailwind Classes Explained
| Class | Purpose |
|---|---|
w-32 h-32 |
Sets width and height to 8rem (128px) |
rounded-full |
Makes the element perfectly circular |
flex items-center justify-center |
Centers the text both horizontally and vertically |
bg-blue-500 |
Sets background color |
text-white font-bold |
Sets text color and weight |
Different Sized Circles
You can create circles of various sizes by changing the width and height classes
<!DOCTYPE html>
<html lang="en">
<head>
<title>Different Sized Circles</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="flex items-center justify-center gap-4 h-screen bg-gray-100">
<div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center text-white font-bold text-xs">
S
</div>
<div class="w-24 h-24 bg-green-500 rounded-full flex items-center justify-center text-white font-bold text-sm">
M
</div>
<div class="w-32 h-32 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-lg">
L
</div>
</body>
</html>
Three circles of different sizes (small red, medium green, large purple) with letters S, M, L appear side by side.
Circle with Multiple Lines of Text
For longer text that needs to wrap within the circle, adjust the text size and add proper spacing
<!DOCTYPE html>
<html lang="en">
<head>
<title>Circle with Multiple Lines</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="flex items-center justify-center h-screen bg-gray-100">
<div class="w-40 h-40 bg-indigo-500 rounded-full flex items-center justify-center text-white font-semibold text-center p-4">
<span class="text-sm leading-tight">
Welcome to<br>
TutorialsPoint
</span>
</div>
</body>
</html>
A large indigo circle with two lines of white text "Welcome to TutorialsPoint" centered inside.
Conclusion
Creating circles with text in Tailwind CSS is straightforward using utility classes. The key is using equal width and height with rounded-full and flexbox centering for perfect alignment.
1K+ Views
