🚀 Tailwind CSS: The Utility-First Approach
Tailwind CSS is a framework composed of low-level utility classes. Instead of writing a CSS rule like .center-container { display: flex; }, you apply the class flex directly to the HTML tag.
📝 Code Breakdown
<div class="flex justify-center items-center">
<p class="text-blue-500 text-sm">Pure CSS with a Twist</p>
</div>| Class | CSS Property Equivalent | Purpose |
|---|---|---|
flex | display: flex; | Starts the flexbox context. |
justify-center | justify-content: center; | Aligns items horizontally (main axis). |
items-center | align-items: center; | Aligns items vertically (cross axis). |
text-blue-500 | color: rgb(59, 130, 246); | Sets the text color (requires a shade number). |
text-sm | font-size: 0.875rem; | Sets font size to “small.” |
Useful link for practice layout: Grid Garden Flexbox Froggy