Text Size Utilities
Text size utilities in Tailwind CSS are used to control the size of text on webpages.
Text size utilities help create:
- headings
- paragraphs
- titles
- labels
- responsive typography
Tailwind provides predefined text size classes that can be directly used inside HTML elements.
Text Size Classes
Tailwind provides different text size utilities.
| Class | Meaning |
|---|---|
text-xs |
Extra small text |
text-sm |
Small text |
text-base |
Normal text |
text-lg |
Large text |
text-xl |
Extra large text |
text-2xl |
Very large text |
text-4xl |
Huge text |
Example
<!DOCTYPE html>
<html>
<head>
<title>Text Size Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6 space-y-4">
<p class="text-xs">
Extra Small Text
</p>
<p class="text-sm">
Small Text
</p>
<p class="text-base">
Normal Text
</p>
<p class="text-lg">
Large Text
</p>
<p class="text-2xl">
Very Large Text
</p>
<p class="text-4xl font-bold">
Huge Text
</p>
</body>
</html>Body Classes
<body class="p-6 space-y-4">
p-6
Adds padding around page content.
space-y-4
Adds vertical spacing between elements.
Without this class:
-
text lines appear too close.
Extra Small Text
<p class="text-xs">
text-xs
Creates extra small text.
Used for:
-
captions
-
labels
-
helper text
Small Text
<p class="text-sm">
text-sm
Creates small text.
Used for:
-
descriptions
-
secondary content
Normal Text
<p class="text-base">
text-base
Default normal text size.
Used for:
-
paragraph content
Large Text
<p class="text-lg">
text-lg
Creates large text.
Used for:
-
section titles
-
highlighted text
Very Large Text
<p class="text-2xl">
text-2xl
Creates very large text.
Used for:
-
headings
-
important titles
Huge Text
<p class="text-4xl font-bold">
text-4xl
Creates huge text.
font-bold
Makes text bold.
Used for:
-
hero headings
-
banners
-
main titles
Text Size Comparison
| Class | Typical Usage |
|---|---|
text-xs |
Captions |
text-sm |
Small descriptions |
text-base |
Normal paragraph text |
text-lg |
Subheadings |
text-2xl |
Page headings |
text-4xl |
Main banners |
Responsive Text Sizes
Tailwind allows responsive typography using breakpoints.
Example: Responsive Text
<!DOCTYPE html>
<html>
<head>
<title>Responsive Text Sizes</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">
<h1 class="text-lg md:text-3xl lg:text-5xl font-bold text-blue-600">
Responsive Typography
</h1>
<p class="mt-4 text-gray-700">
Resize the browser window to see text size changes.
</p>
</body>
</html>Responsive Heading
<h1 class="text-lg md:text-3xl lg:text-5xl font-bold text-blue-600">
text-lg
Default text size for mobile devices.
md:text-3xl
For medium screens and above:
-
text becomes larger.
lg:text-5xl
For large screens and above:
-
text becomes very large.
font-bold
Makes heading bold.
text-blue-600
Blue heading color.
Paragraph
<p class="mt-4 text-gray-700">
mt-4
Margin above paragraph.
text-gray-700
Gray text color.
Example: Card using Text Sizes
<!DOCTYPE html>
<html>
<head>
<title>Typography Card</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
<div class="bg-white p-8 rounded-xl shadow-lg w-96">
<h1 class="text-3xl font-bold text-blue-600 mb-2">
Tailwind CSS
</h1>
<h2 class="text-xl text-gray-700 mb-4">
Utility-First CSS Framework
</h2>
<p class="text-base text-gray-600">
Tailwind CSS provides utility classes for building
responsive and modern user interfaces quickly.
</p>
</div>
</body>
</html>Main Heading
<h1 class="text-3xl font-bold text-blue-600 mb-2">
text-3xl
Large title text.
font-bold
Bold heading.
text-blue-600
Blue text color.
Subheading
<h2 class="text-xl text-gray-700 mb-4">
text-xl
Medium-large subheading.
text-gray-700
Gray text.
Paragraph
<p class="text-base text-gray-600">
text-base
Normal paragraph size.
text-gray-600
Soft gray paragraph text.
Advantages of Text Size Utilities
- Consistent typography
- Faster text styling
- Responsive text design
- Improved readability
- Professional UI design
Summary
In this topic, we learned how text size utilities in Tailwind CSS help control typography size on webpages. We explored different text size classes, responsive text utilities, and real-world examples using headings, paragraphs, and cards. Tailwind text size utilities make typography responsive, consistent, and easy to manage.
Keywords
Text Size Utilities, Typography, text-xs, text-sm, text-base, text-xl, text-4xl, Responsive Typography, Tailwind Text Sizes, Headings, Paragraph Styling, Modern UI Design, Frontend Development.
