Build beautiful, responsive websites faster with utility-first CSS
Imagine having a toolbox where instead of building everything from scratch, you have pre-made parts you can snap together! Tailwind CSS is a utility-first CSS framework that provides small, single-purpose classes you combine to build any design. Instead of writing custom CSS, you apply classes directly in your HTML!
Tailwind CSS is a utility-first CSS framework that lets you style elements using pre-defined classes. Instead of writing CSS files, you add classes like "bg-blue-500", "text-center", "p-4" directly to your HTML. It's like having thousands of tiny CSS rules ready to use!
<!-- Traditional CSS -->
<div class="card">
/* CSS file: .card { background: white; padding: 20px; border-radius: 8px; } */
<!-- Tailwind CSS -->
<div class="bg-white p-5 rounded-lg">
Faster Development
Build UIs 3-5x faster without writing custom CSS
Consistent Design
Built-in design system ensures consistency
Responsive by Default
Mobile-first with simple responsive modifiers
Industry Standard
Used by companies like GitHub, Netflix, NASA
Tailwind has thousands of utility classes, but you'll use about 50-100 regularly. Let's learn the most important ones organized by category!
<!-- Text colors -->
<p class="text-blue-500">Blue text</p>
<p class="text-red-600">Red text</p>
<p class="text-gray-900">Dark gray text</p>
<!-- Background colors -->
<div class="bg-blue-500">Blue background</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-500">Gradient</div>
<!-- Color scale: 50 (lightest) to 950 (darkest) -->
<!-- Padding (inside spacing) -->
<div class="p-4">Padding all sides</div> // 1rem (16px)
<div class="px-6 py-3">Horizontal & vertical</div>
<div class="pt-2 pr-4 pb-2 pl-4">Individual sides</div>
<!-- Margin (outside spacing) -->
<div class="m-4">Margin all sides</div>
<div class="mx-auto">Center horizontally</div>
<div class="mt-8 mb-4">Top and bottom margin</div>
<!-- Scale: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24... -->
<h1 class="text-4xl font-bold">Large bold heading</h1>
<p class="text-lg font-medium">Medium text</p>
<p class="text-sm text-gray-600">Small gray text</p>
<p class="text-center italic underline">Styled text</p>
<p class="uppercase tracking-wide">Uppercase with spacing</p>
<!-- Width & Height -->
<div class="w-full">Full width</div>
<div class="w-1/2">Half width</div>
<div class="w-64">Fixed width (256px)</div>
<div class="h-screen">Full viewport height</div>
<div class="max-w-4xl mx-auto">Max width centered</div>
<!-- Display -->
<div class="flex items-center justify-between">Flexbox</div>
<div class="grid grid-cols-3 gap-4">Grid layout</div>
<div class="hidden md:block">Hide on mobile, show on desktop</div>
<div class="border border-gray-300">Border</div>
<div class="border-2 border-blue-500">Thicker blue border</div>
<div class="rounded-lg">Rounded corners</div>
<div class="rounded-full">Fully rounded (circle)</div>
<div class="shadow-lg">Drop shadow</div>
Tailwind makes responsive design incredibly easy! Just add a breakpoint prefix to any utility class. It's mobile-first, meaning styles apply to mobile by default, then you add larger screen styles.
• sm: 640px and up (tablets)
• md: 768px and up (small laptops)
• lg: 1024px and up (desktops)
• xl: 1280px and up (large desktops)
• 2xl: 1536px and up (extra large screens)
<!-- Text size: small on mobile, large on desktop -->
<h1 class="text-2xl md:text-4xl lg:text-5xl">Responsive heading</h1>
<!-- Stack on mobile, side-by-side on desktop -->
<div class="flex flex-col md:flex-row gap-4">
<div>Item 1</div>
<div>Item 2</div>
</div>
<!-- 1 column on mobile, 2 on tablet, 3 on desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Cards here -->
</div>
<!-- Hide on mobile, show on desktop -->
<div class="hidden lg:block">Desktop only content</div>
Always design for mobile first, then add larger screen styles. Classes without prefixes apply to all sizes. Prefixed classes (md:, lg:) only apply at that breakpoint and above!
Tailwind makes dark mode super easy! Just add the dark:prefix to any utility class.
<!-- Light background, dark in dark mode -->
<div class="bg-white dark:bg-gray-900">
<h1 class="text-gray-900 dark:text-white">Heading</h1>
<p class="text-gray-600 dark:text-gray-300">Text</p>
</div>
<!-- Combine with responsive -->
<div class="bg-white dark:bg-gray-900 md:p-8 lg:p-12">
Add interactive effects with state modifiers like hover:, focus:, active:, and more!
<!-- Button with hover effect -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg">
Hover me
</button>
<!-- Input with focus effect -->
<input class="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200">
<!-- Card with hover scale -->
<div class="transform hover:scale-105 transition-transform duration-300">
Hover to scale
</div>
Let's build a beautiful, responsive product card using Tailwind CSS!
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="product.jpg" alt="Product">
<div class="p-6">
<div class="flex items-center justify-between mb-4">
<span class="text-sm font-semibold text-blue-600 uppercase">New</span>
<span class="text-2xl font-bold text-gray-900 dark:text-white">$99</span>
</div>
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
Premium Headphones
</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">
High-quality wireless headphones with noise cancellation
</p>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 rounded-lg transition-colors">
Add to Cart
</button>
</div>
</div>
Awesome! You can now build beautiful, responsive UIs with Tailwind CSS. Next, we'll learn about state management and API integration to make your applications dynamic and data-driven!