⏱️ Duration : 15 minutes | Learn how to build beautiful UIs without writing custom CSS.
What is Tailwind CSS? Tailwind CSS is a utility-first CSS framework . Instead of writing custom CSS, you apply pre-built classes directly in your HTML.
It’s like building with LEGO instead of carving from scratch! 🧱 Traditional CSS vs Tailwind Traditional CSS
Tailwind CSS
.card { background-color : white ; border-radius : 8 px ; padding : 24 px ; box-shadow : 0 4 px 6 px rgba ( 0 , 0 , 0 , 0.1 ); } .card-title { font-size : 20 px ; font-weight : bold ; color : #1f2937 ; }
Why do developers love Tailwind? You never leave your HTML file. No more context-switching, no more inventing class names like .card-wrapper-container-inner-box 😅
🤯 Did you know? Tailwind CSS has over 80,000+ GitHub stars and is used by Netflix, OpenAI, Shopify, and NASA!
Core Utilities Spacing (Padding & Margin) Tailwind uses a simple numbering system for spacing:
Class Size Example p-14px <div class="p-1">p-28px <div class="p-2">p-416px <div class="p-4">p-624px <div class="p-6">p-832px <div class="p-8">
Variants:
p-4 = padding on all sidespx-4 = padding left and rightpy-4 = padding top and bottompt-4 = padding top onlym-4 = margin (same pattern)
Colors Tailwind provides a beautiful color palette:
<!-- Text colors --> < p class = "text-gray-500" > Gray text </ p > < p class = "text-blue-600" > Blue text </ p > < p class = "text-red-500" > Red text </ p > <!-- Background colors --> < div class = "bg-white" > White background </ div > < div class = "bg-gray-100" > Light gray </ div > < div class = "bg-blue-500" > Blue background </ div >
Try it! 👇 Mix and match Tailwind classes:Typography <!-- Font sizes --> < p class = "text-sm" > Small </ p > < p class = "text-base" > Base (default) </ p > < p class = "text-lg" > Large </ p > < p class = "text-xl" > Extra large </ p > < p class = "text-2xl" > 2X large </ p > <!-- Font weight --> < p class = "font-normal" > Normal </ p > < p class = "font-medium" > Medium </ p > < p class = "font-semibold" > Semibold </ p > < p class = "font-bold" > Bold </ p >
Layout with Flexbox Flexbox is incredibly easy with Tailwind:
<!-- Horizontal layout with gap --> < div class = "flex gap-4" > < div > Item 1 </ div > < div > Item 2 </ div > < div > Item 3 </ div > </ div > <!-- Centered content --> < div class = "flex items-center justify-center h-screen" > < p > I'm centered! </ p > </ div > <!-- Space between items --> < div class = "flex justify-between" > < div > Left </ div > < div > Right </ div > </ div >
Building a Card Component Let’s build a beautiful card step by step:
< div class = "max-w-sm rounded-xl bg-white p-6 shadow-lg" > <!-- Image --> < img class = "h-48 w-full rounded-lg object-cover" src = "https://picsum.photos/400/300" alt = "Card image" /> <!-- Content --> < div class = "mt-4" > < h3 class = "text-xl font-semibold text-gray-900" > Card Title </ h3 > < p class = "mt-2 text-gray-600" > This is a beautiful card built with Tailwind CSS. No custom CSS needed! </ p > </ div > <!-- Button --> < button class = "mt-4 w-full rounded-lg bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700" > Learn More </ button > </ div >
Try it! 👇 Click the like button:Responsive Design Add breakpoint prefixes for responsive styles:
Prefix Screen Width sm:640px+ md:768px+ lg:1024px+ xl:1280px+
< div class = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" > <!-- 1 column on mobile, 2 on tablet, 3 on desktop --> < div class = "bg-white p-4 rounded-lg" > Card 1 </ div > < div class = "bg-white p-4 rounded-lg" > Card 2 </ div > < div class = "bg-white p-4 rounded-lg" > Card 3 </ div > </ div >
Beginner Tip : Tailwind is “mobile-first”. Write styles for mobile, then add md: or lg: for larger screens.
Hover and Focus States Add interactivity with state prefixes:
<!-- Hover effects --> < button class = "bg-blue-500 hover:bg-blue-600 transition-colors" > Hover me </ button > <!-- Focus states --> < input class = "border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 rounded-lg px-4 py-2" placeholder = "Focus me" />
Quick Reference What you want Tailwind class Rounded corners rounded-lgShadow shadow-mdFlex row flexFlex column flex flex-colCenter items items-center justify-centerFull width w-fullFixed height h-64 (256px)Hide on mobile hidden md:blockShow only on mobile block md:hidden
Learn More
Tailwind CSS Docs The official Tailwind CSS documentation with all utilities.
Next up : TypeScript → 
