Tailwind CSS Typography Classes Explained (With Examples)
When we use Tailwind CSS so normal attributes of tag will be removed and all teg output look like same so we need to apply styles manually. for apply styles on textual data Tailwind CSS have a Typography classes
Tailwind CSS provides a powerful set of typography utility classes that allow you to control text styles directly in your HTML.
In this guide, we’ll explore the most commonly used Tailwind CSS typography classes with clear and practical examples.
Text Size (Font Size)
Tailwind provides predefined text size classes that follow a consistent scale.
<p class="text-sm">Small text</p>
<p class="text-base">Normal text</p>
<p class="text-lg">Large text</p>
<p class="text-xl">Extra large text</p>
<p class="text-3xl">Very large heading</p>
These classes help maintain consistent typography across your UI.
Font Weight
Font weight controls how bold or light the text appears.
<p class="font-light">Light text</p>
<p class="font-normal">Normal text</p>
<p class="font-medium">Medium text</p>
<p class="font-semibold">Semi-bold text</p>
<p class="font-bold">Bold text</p>
Text Color
Tailwind uses a color palette system that makes it easy to apply text colors.
<p class="text-gray-700">Gray text</p>
<p class="text-blue-500">Blue text</p>
<p class="text-red-600">Red text</p>
<p class="text-green-500">Success message</p>
Text Alignment
Control how text is aligned inside its container.
<p class="text-left">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>
<p class="text-justify">Justified text</p>
Line Height (Leading)
Line height affects text readability, especially for paragraphs.
<p class="leading-tight">Tight line height</p>
<p class="leading-normal">Normal line height</p>
<p class="leading-relaxed">Relaxed line height</p>
<p class="leading-loose">Loose line height</p>
Letter Spacing (Tracking)
Letter spacing controls the space between characters.
<p class="tracking-tight">Tight spacing</p>
<p class="tracking-normal">Normal spacing</p>
<p class="tracking-wide">Wide spacing</p>
Text Transform
Tailwind provides utilities to transform text case.
<p class="uppercase">Uppercase text</p>
<p class="lowercase">Lowercase text</p>
<p class="capitalize">Capitalized text</p>
Text Decoration
You can easily apply or remove text decoration.
<p class="underline">Underlined text</p>
<p class="line-through">Strikethrough text</p>
<p class="no-underline">No underline</p>
Truncating Text
Use Tailwind utilities to handle long text content.
<p class="truncate">
This is a very long text that will be truncated...
</p>
Real-World Usage
Tailwind typography classes are commonly used for:
- Blog content
- Cards and UI components
- Headings and descriptions
- Buttons and labels
🎥 Tailwind CSS Typography Classes Video Tutorial
Common Beginner Mistakes
- Using too many font sizes
- Ignoring line height
- Poor color contrast
- Overusing text transformations
Best Practices
- Stick to a typography scale
- Use consistent font weights
- Optimize readability first
- Use responsive typography when needed
Summary
- Tailwind CSS offers powerful typography utilities
- Text size, color, and spacing are easy to control
- No custom CSS required
- Perfect for modern UI design
Conclusion
Tailwind CSS typography classes give you full control over text styling without writing custom CSS.
Mastering these utilities will significantly improve your UI design skills.
👉 Don’t forget to like, share, and subscribe to our channel SR Programist and also Follow us on other Social media platforms for more web development tutorials!
Post a Comment