Master core Tailwind utility classes for layout, spacing, typography, and colors. Learn flexbox, grid, spacing system, state variants, and arbitrary values.
Utility classes are the building blocks of Tailwind CSS. Instead of writing custom CSS, you compose utility classes to build any design. This lesson covers the essential utilities you'll use daily: layout, spacing, typography, and colors.
Mastering these core utilities is crucial because they form 90% of your daily Tailwind usage. You'll learn the systematic approach to Tailwind's design system, including the spacing scale, color palette, and how to use state variants effectively.
By the end of this lesson, you'll be able to build complete layouts, style text beautifully, and create responsive interfaces using only utility classes. Let's dive into the utilities that make Tailwind so powerful!
Layout utilities control how elements are displayed and positioned. These are your most frequently used classes.
Display Utilities:
1<!-- Block display -->
2<div class="block">Block element</div>
3
4<!-- Inline display -->
5<span class="inline">Inline element</span>
6
7<!-- Inline block -->
8<div class="inline-block">Inline-block</div>
9
10<!-- Flex display -->
11<div class="flex">Flex container</div>
12
13<!-- Grid display -->
14<div class="grid">Grid container</div>
15
16<!-- Hidden element -->
17<div class="hidden">Hidden content</div>Flexbox Utilities:
Flexbox is your go-to for most layouts:
1<!-- Horizontal flex container -->
2<div class="flex">
3 <div>Item 1</div>
4 <div>Item 2</div>
5 <div>Item 3</div>
6</div>
7
8<!-- Vertical flex container -->
9<div class="flex flex-col">
10 <div>Item 1</div>
11 <div>Item 2</div>
12</div>
13
14<!-- Center items -->
15<div class="flex items-center justify-center">
16 <div>Centered!</div>
17</div>
18
19<!-- Space between items -->
20<div class="flex justify-between">
21 <div>Left</div>
22 <div>Right</div>
23</div>
24
25<!-- Flex wrap -->
26<div class="flex flex-wrap gap-4">
27 <div>Item 1</div>
28 <div>Item 2</div>
29 <div>Item 3</div>
30</div>Common Flexbox Patterns:
1<!-- Navbar -->
2<nav class="flex items-center justify-between p-4">
3 <div class="flex items-center space-x-4">
4 <img src="logo.png" class="h-8">
5 <span>Brand</span>
6 </div>
7 <div class="flex gap-6">
8 <a href="#">Home</a>
9 <a href="#">About</a>
10 <a href="#">Contact</a>
11 </div>
12</nav>
13
14<!-- Card with header and footer -->
15<div class="flex flex-col h-full">
16 <div class="flex-grow">Content grows to fill space</div>
17 <div>Footer stays at bottom</div>
18</div>
19
20<!-- Centered modal -->
21<div class="flex items-center justify-center min-h-screen">
22 <div class="bg-white p-8 rounded-lg">Modal content</div>
23</div>Grid Utilities:
CSS Grid for complex layouts:
1<!-- Simple grid -->
2<div class="grid grid-cols-3 gap-4">
3 <div>1</div>
4 <div>2</div>
5 <div>3</div>
6 <div>4</div>
7 <div>5</div>
8 <div>6</div>
9</div>
10
11<!-- Responsive grid -->
12<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
13 <!-- Auto-responsive cards -->
14</div>
15
16<!-- Auto-fit grid -->
17<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
18 <!-- Automatically fits columns -->
19</div>
20
21<!-- Grid with column spans -->
22<div class="grid grid-cols-6 gap-4">
23 <div class="col-span-4">Wide column</div>
24 <div class="col-span-2">Narrow column</div>
25</div>Position Utilities:
1<!-- Relative positioning -->
2<div class="relative">
3 <div class="absolute top-0 right-0">Absolute child</div>
4</div>
5
6<!-- Fixed positioning -->
7<div class="fixed bottom-4 right-4">
8 Chat button
9</div>
10
11<!-- Sticky header -->
12<header class="sticky top-0 bg-white">
13 Sticky navigation
14</header>Tailwind's spacing scale is based on a 4px unit system, providing consistent spacing throughout your design.
Spacing Scale:
| Class | Size | Pixels |
|-------|------|--------|
| 0 | 0rem | 0px |
| 1 | 0.25rem | 4px |
| 2 | 0.5rem | 8px |
| 3 | 0.75rem | 12px |
| 4 | 1rem | 16px |
| 5 | 1.25rem | 20px |
| 6 | 1.5rem | 24px |
| 8 | 2rem | 32px |
| 10 | 2.5rem | 40px |
| 12 | 3rem | 48px |
| 16 | 4rem | 64px |
| 20 | 5rem | 80px |
| 24 | 6rem | 96px |
| 32 | 8rem | 128px |
Padding Utilities:
1<!-- Padding all sides -->
2<div class="p-4">Padding 1rem (16px)</div>
3
4<!-- Padding specific sides -->
5<div class="pt-4">Padding top</div>
6<div class="pr-4">Padding right</div>
7<div class="pb-4">Padding bottom</div>
8<div class="pl-4">Padding left</div>
9
10<!-- Padding horizontal/vertical -->
11<div class="px-4">Padding left and right</div>
12<div class="py-4">Padding top and bottom</div>
13
14<!-- Padding combinations -->
15<div class="px-6 py-3">Common button padding</div>
16<div class="p-8 md:p-12">Responsive padding</div>Margin Utilities:
1<!-- Margin all sides -->
2<div class="m-4">Margin 1rem (16px)</div>
3
4<!-- Margin specific sides -->
5<div class="mt-4">Margin top</div>
6<div class="mr-4">Margin right</div>
7<div class="mb-4">Margin bottom</div>
8<div class="ml-4">Margin left</div>
9
10<!-- Margin horizontal/vertical -->
11<div class="mx-4">Margin left and right</div>
12<div class="my-4">Margin top and bottom</div>
13
14<!-- Negative margins -->
15<div class="-mt-4">Negative margin top</div>
16
17<!-- Auto margin (centering) -->
18<div class="mx-auto max-w-4xl">Centered container</div>Gap Utilities (Flexbox/Grid):
1<!-- Flex gap -->
2<div class="flex gap-4">
3 <div>Item 1</div>
4 <div>Item 2</div>
5</div>
6
7<!-- Grid gap -->
8<div class="grid grid-cols-3 gap-6">
9 <div>1</div>
10 <div>2</div>
11 <div>3</div>
12</div>
13
14<!-- Separate gap for x and y -->
15<div class="flex flex-wrap gap-x-6 gap-y-4">
16 <!-- Different horizontal and vertical gaps -->
17</div>Space Between (Older Pattern):
1<!-- Horizontal spacing -->
2<div class="flex space-x-4">
3 <button>Button 1</button>
4 <button>Button 2</button>
5</div>
6
7<!-- Vertical spacing -->
8<div class="space-y-6">
9 <p>Paragraph 1</p>
10 <p>Paragraph 2</p>
11 <p>Paragraph 3</p>
12</div>Common Spacing Patterns:
1<!-- Card with consistent spacing -->
2<div class="bg-white rounded-lg shadow-md p-6 space-y-4">
3 <h2 class="text-2xl font-bold">Title</h2>
4 <p>Content with consistent vertical rhythm</p>
5 <button class="mt-4">Action</button>
6</div>
7
8<!-- Section spacing -->
9<section class="py-12 px-4">
10 <div class="max-w-6xl mx-auto">
11 <h2 class="text-3xl font-bold mb-8">Section Title</h2>
12 <!-- Content -->
13 </div>
14</section>Tailwind provides a comprehensive typography system with consistent scales for font sizes, weights, and line heights.
Font Size Scale:
1<p class="text-xs">Extra small (0.75rem / 12px)</p>
2<p class="text-sm">Small (0.875rem / 14px)</p>
3<p class="text-base">Base (1rem / 16px)</p>
4<p class="text-lg">Large (1.125rem / 18px)</p>
5<p class="text-xl">Extra large (1.25rem / 20px)</p>
6<p class="text-2xl">2XL (1.5rem / 24px)</p>
7<p class="text-3xl">3XL (1.875rem / 30px)</p>
8<p class="text-4xl">4XL (2.25rem / 36px)</p>
9<p class="text-5xl">5XL (3rem / 48px)</p>
10<p class="text-6xl">6XL (3.75rem / 60px)</p>
11<p class="text-7xl">7XL (4.5rem / 72px)</p>
12<p class="text-8xl">8XL (6rem / 96px)</p>
13<p class="text-9xl">9XL (8rem / 128px)</p>Font Weight:
1<p class="font-thin">Thin (100)</p>
2<p class="font-extralight">Extra light (200)</p>
3<p class="font-light">Light (300)</p>
4<p class="font-normal">Normal (400)</p>
5<p class="font-medium">Medium (500)</p>
6<p class="font-semibold">Semibold (600)</p>
7<p class="font-bold">Bold (700)</p>
8<p class="font-extrabold">Extra bold (800)</p>
9<p class="font-black">Black (900)</p>Font Family:
1<p class="font-sans">Sans-serif font</p>
2<p class="font-serif">Serif font</p>
3<p class="font-mono">Monospace font</p>Text Alignment:
1<p class="text-left">Left aligned</p>
2<p class="text-center">Center aligned</p>
3<p class="text-right">Right aligned</p>
4<p class="text-justify">Justified text</p>Text Transform:
1<p class="uppercase">UPPERCASE TEXT</p>
2<p class="lowercase">lowercase text</p>
3<p class="capitalize">Capitalized Text</p>
4<p class="normal-case">Normal Case</p>Text Decoration:
1<p class="underline">Underlined text</p>
2<p class="line-through">Strikethrough text</p>
3<p class="no-underline">No decoration</p>Line Height:
1<p class="leading-none">Leading none (1)</p>
2<p class="leading-tight">Leading tight (1.25)</p>
3<p class="leading-normal">Leading normal (1.5)</p>
4<p class="leading-relaxed">Leading relaxed (1.625)</p>
5<p class="leading-loose">Leading loose (2)</p>Letter Spacing:
1<p class="tracking-tighter">Tighter spacing</p>
2<p class="tracking-tight">Tight spacing</p>
3<p class="tracking-normal">Normal spacing</p>
4<p class="tracking-wide">Wide spacing</p>
5<p class="tracking-wider">Wider spacing</p>
6<p class="tracking-widest">Widest spacing</p>Text Color and Opacity:
1<p class="text-gray-900">Dark gray text</p>
2<p class="text-gray-500">Medium gray text</p>
3<p class="text-blue-600">Blue text</p>
4<p class="text-red-500">Red text</p>
5
6<!-- Text with opacity -->
7<p class="text-gray-900/50">50% opacity</p>
8<p class="text-blue-600/75">75% opacity</p>Typography Best Practices:
1<!-- Heading hierarchy -->
2<h1 class="text-4xl font-bold text-gray-900 mb-4">Main Heading</h1>
3<h2 class="text-3xl font-bold text-gray-800 mb-3">Sub Heading</h2>
4<h3 class="text-2xl font-semibold text-gray-700 mb-2">Section</h3>
5
6<!-- Body text -->
7<p class="text-base text-gray-600 leading-relaxed">
8 Body text with comfortable line height and readable color.
9</p>
10
11<!-- Button text -->
12<button class="text-sm font-semibold uppercase tracking-wide">
13 Call to Action
14</button>
15
16<!-- Caption text -->
17<p class="text-xs text-gray-500">Small caption or helper text</p>Tailwind includes a carefully crafted color palette with 10 shades for each color, from 50 (lightest) to 950 (darkest).
Color Palette:
Colors available: gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
Background Colors:
1<!-- Solid backgrounds -->
2<div class="bg-white">White background</div>
3<div class="bg-gray-50">Lightest gray</div>
4<div class="bg-gray-900">Darkest gray</div>
5<div class="bg-blue-500">Blue background</div>
6<div class="bg-red-600">Red background</div>
7
8<!-- Background with opacity -->
9<div class="bg-blue-500/50">50% opacity blue</div>
10<div class="bg-gray-900/75">75% opacity dark</div>
11
12<!-- Transparent background -->
13<div class="bg-transparent">Transparent</div>Text Colors:
1<p class="text-gray-900">Primary text</p>
2<p class="text-gray-600">Secondary text</p>
3<p class="text-gray-400">Tertiary text</p>
4<p class="text-blue-600">Link color</p>
5<p class="text-red-600">Error text</p>
6<p class="text-green-600">Success text</p>Border Colors:
1<div class="border border-gray-200">Light border</div>
2<div class="border border-gray-800">Dark border</div>
3<div class="border-2 border-blue-500">Blue border</div>
4<div class="border-4 border-red-500">Thick red border</div>
5
6<!-- Border on specific sides -->
7<div class="border-t border-gray-200">Top border</div>
8<div class="border-l-4 border-blue-500">Left accent</div>Gradients:
1<!-- Linear gradients -->
2<div class="bg-gradient-to-r from-blue-500 to-purple-600">
3 Horizontal gradient
4</div>
5
6<div class="bg-gradient-to-br from-pink-500 via-purple-500 to-indigo-500">
7 Diagonal gradient with middle color
8</div>
9
10<div class="bg-gradient-to-t from-gray-900 to-transparent">
11 Fade to transparent
12</div>Ring Colors (Focus States):
1<input class="ring-2 ring-blue-500" type="text">
2<button class="focus:ring-2 focus:ring-purple-500">
3 Button with focus ring
4</button>Color Combinations:
1<!-- Primary button -->
2<button class="bg-blue-600 text-white hover:bg-blue-700">
3 Primary Button
4</button>
5
6<!-- Card -->
7<div class="bg-white border border-gray-200 text-gray-900">
8 Card content
9</div>
10
11<!-- Alert -->
12<div class="bg-red-50 border-l-4 border-red-500 text-red-900 p-4">
13 Error message
14</div>
15
16<!-- Success -->
17<div class="bg-green-50 border border-green-200 text-green-800 p-4">
18 Success message
19</div>Accessibility Colors:
1<!-- High contrast text -->
2<p class="text-gray-900 bg-white">Maximum readability</p>
3<p class="text-white bg-gray-900">Dark mode high contrast</p>
4
5<!-- Sufficient contrast (WCAG AA) -->
6<p class="text-gray-700 bg-white">Good readability</p>
7<a href="#" class="text-blue-600 hover:text-blue-800 underline">
8 Accessible link
9</a>State variants let you apply styles conditionally based on element state. This is where Tailwind really shines.
Hover State:
1<!-- Hover background -->
2<button class="bg-blue-500 hover:bg-blue-700">
3 Hover me
4</button>
5
6<!-- Hover text color -->
7<a href="#" class="text-blue-600 hover:text-blue-800">
8 Link
9</a>
10
11<!-- Hover scale -->
12<div class="transform hover:scale-105 transition">
13 Scales on hover
14</div>
15
16<!-- Hover shadow -->
17<div class="shadow hover:shadow-lg transition">
18 Shadow increases
19</div>Focus State:
1<!-- Focus ring -->
2<input class="focus:ring-2 focus:ring-blue-500 focus:outline-none" type="text">
3
4<!-- Focus border -->
5<textarea class="border border-gray-300 focus:border-blue-500"></textarea>
6
7<!-- Focus background -->
8<button class="focus:bg-blue-100">
9 Focus me
10</button>Active State:
1<!-- Active (clicking) -->
2<button class="bg-blue-500 active:bg-blue-800">
3 Click me
4</button>
5
6<!-- Active scale -->
7<button class="transform active:scale-95 transition">
8 Press effect
9</button>Group Hover:
1<div class="group">
2 <div class="bg-white group-hover:bg-blue-50">
3 Hover parent to change child
4 </div>
5</div>
6
7<!-- Card with group hover -->
8<div class="group border rounded-lg p-6 hover:shadow-lg transition">
9 <h3 class="text-xl font-bold group-hover:text-blue-600">Title</h3>
10 <p class="text-gray-600 group-hover:text-gray-900">Description</p>
11</div>Peer State (Sibling Hover):
1<input type="checkbox" class="peer" />
2<label class="peer-checked:text-blue-600 peer-checked:font-bold">
3 Checkbox label changes when checked
4</label>Combining States:
1<!-- Hover and focus -->
2<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:outline-none">
3 Interactive button
4</button>
5
6<!-- Complete interactive element -->
7<a href="#" class="inline-block px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 active:bg-blue-800 transition-all duration-200">
8 Full interactive link
9</a>Disabled State:
1<button class="bg-blue-500 disabled:bg-gray-300 disabled:cursor-not-allowed" disabled>
2 Disabled button
3</button>First/Last Child:
1<ul>
2 <li class="first:pt-0 pt-4">First item (no top padding)</li>
3 <li class="pt-4">Middle item</li>
4 <li class="last:pb-0 pt-4">Last item (no bottom padding)</li>
5</ul>Even/Odd (Striped Tables):
1<table>
2 <tbody>
3 <tr class="odd:bg-gray-50">
4 <td>Odd row</td>
5 </tr>
6 <tr class="odd:bg-gray-50">
7 <td>Even row (white)</td>
8 </tr>
9 <tr class="odd:bg-gray-50">
10 <td>Odd row</td>
11 </tr>
12 </tbody>
13</table>Sometimes you need a value that's not in Tailwind's scale. Use arbitrary values with square brackets.
Arbitrary Sizes:
1<!-- Custom width -->
2<div class="w-[137px]">Exactly 137px wide</div>
3
4<!-- Custom padding -->
5<div class="p-[23px]">23px padding</div>
6
7<!-- Custom margin -->
8<div class="mt-[3.2rem]">Custom margin</div>Arbitrary Colors:
1<!-- Custom background color -->
2<div class="bg-[#1da1f2]">Twitter blue</div>
3
4<!-- Custom text color -->
5<p class="text-[#ff6b6b]">Custom red text</p>
6
7<!-- RGB color -->
8<div class="bg-[rgb(255,107,107)]">RGB background</div>Arbitrary CSS Properties:
1<!-- Custom grid columns -->
2<div class="grid grid-cols-[200px_1fr_200px]">
3 Custom grid template
4</div>
5
6<!-- Custom aspect ratio -->
7<div class="aspect-[4/3]">4:3 aspect ratio</div>
8
9<!-- Custom font size -->
10<p class="text-[clamp(1rem,5vw,3rem)]">Fluid typography</p>When to Use Arbitrary Values:
✅ Brand-specific colors: bg-[#brand-hex]
✅ Exact designs from mockups: w-[347px]
✅ Complex grid layouts: grid-cols-[repeat(auto-fit,minmax(250px,1fr))]
✅ One-off values: mt-[13px]
❌ Don't use for values Tailwind already has
❌ Don't overuse - try to stick to the design system
Best Practice:
If you find yourself using the same arbitrary value repeatedly, add it to your tailwind.config.js instead:
1// tailwind.config.js
2module.exports = {
3 theme: {
4 extend: {
5 colors: {
6 brand: '#1da1f2',
7 },
8 spacing: {
9 '137': '137px',
10 }
11 }
12 }
13}Now you can use: bg-brand and w-137
Comprehensive demonstration of layout, spacing, typography, colors, and state variants. Build a professional navigation bar using only utility classes.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Tailwind Utility Classes Demo</title>
7 <script src="https://cdn.tailwindcss.com"></script>
8</head>
9<body class="bg-gray-50 min-h-screen">
10 <!-- Navigation Bar - Complete Example -->
11 <nav class="bg-white shadow-md">
12 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
13 <div class="flex justify-between items-center h-16">
14 <!-- Logo -->
15 <div class="flex items-center space-x-3">
16 <div class="bg-blue-600 text-white font-bold px-3 py-2 rounded-lg">
17 TB
18 </div>
19 <span class="text-xl font-bold text-gray-900">TailwindBootstrap</span>
20 </div>
21
22 <!-- Navigation Links -->
23 <div class="hidden md:flex space-x-8">
24 <a href="#" class="text-gray-700 hover:text-blue-600 font-medium transition">Home</a>
25 <a href="#" class="text-gray-700 hover:text-blue-600 font-medium transition">Courses</a>
26 <a href="#" class="text-gray-700 hover:text-blue-600 font-medium transition">About</a>
27 <a href="#" class="text-gray-700 hover:text-blue-600 font-medium transition">Contact</a>
28 </div>
29
30 <!-- CTA Button -->
31 <button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded-lg transition-all duration-200 transform hover:scale-105 active:scale-95">
32 Get Started
33 </button>
34 </div>
35 </div>
36 </nav>
37
38 <!-- Main Content -->
39 <main class="max-w-7xl mx-auto px-4 py-12">
40 <!-- Hero Section -->
41 <div class="text-center mb-16">
42 <h1 class="text-5xl font-bold text-gray-900 mb-4">
43 Master Tailwind CSS Utilities
44 </h1>
45 <p class="text-xl text-gray-600 leading-relaxed max-w-3xl mx-auto">
46 Learn layout, spacing, typography, colors, and state variants through practical examples
47 </p>
48 </div>
49
50 <!-- Layout Section -->
51 <section class="mb-16">
52 <h2 class="text-3xl font-bold text-gray-900 mb-8">Layout Utilities</h2>
53
54 <!-- Flexbox Example -->
55 <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
56 <h3 class="text-2xl font-semibold mb-6">Flexbox Layout</h3>
57 <div class="flex gap-4 mb-4">
58 <div class="flex-1 bg-blue-100 p-6 rounded-lg text-center font-semibold">
59 flex-1
60 </div>
61 <div class="flex-1 bg-blue-200 p-6 rounded-lg text-center font-semibold">
62 flex-1
63 </div>
64 <div class="flex-1 bg-blue-300 p-6 rounded-lg text-center font-semibold">
65 flex-1
66 </div>
67 </div>
68 <p class="text-gray-600 text-sm">class="flex gap-4" - Flexbox with gap spacing</p>
69 </div>
70
71 <!-- Grid Example -->
72 <div class="bg-white rounded-xl shadow-lg p-8">
73 <h3 class="text-2xl font-semibold mb-6">Grid Layout</h3>
74 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
75 <div class="bg-purple-100 p-6 rounded-lg text-center font-semibold">1</div>
76 <div class="bg-purple-200 p-6 rounded-lg text-center font-semibold">2</div>
77 <div class="bg-purple-300 p-6 rounded-lg text-center font-semibold">3</div>
78 <div class="bg-purple-400 p-6 rounded-lg text-center font-semibold text-white">4</div>
79 </div>
80 <p class="text-gray-600 text-sm mt-4">Responsive: 1 col mobile, 2 cols tablet, 4 cols desktop</p>
81 </div>
82 </section>
83
84 <!-- Spacing Section -->
85 <section class="mb-16">
86 <h2 class="text-3xl font-bold text-gray-900 mb-8">Spacing System</h2>
87 <div class="bg-white rounded-xl shadow-lg p-8">
88 <div class="space-y-6">
89 <div class="bg-green-100 p-4 rounded">p-4 (1rem / 16px padding)</div>
90 <div class="bg-green-200 p-6 rounded">p-6 (1.5rem / 24px padding)</div>
91 <div class="bg-green-300 p-8 rounded text-white">p-8 (2rem / 32px padding)</div>
92 </div>
93 <p class="text-gray-600 text-sm mt-6">
94 Tailwind uses a 4px-based spacing scale: 1=4px, 2=8px, 4=16px, 8=32px
95 </p>
96 </div>
97 </section>
98
99 <!-- Typography Section -->
100 <section class="mb-16">
101 <h2 class="text-3xl font-bold text-gray-900 mb-8">Typography</h2>
102 <div class="bg-white rounded-xl shadow-lg p-8 space-y-4">
103 <p class="text-xs text-gray-500">text-xs: Extra small text</p>
104 <p class="text-sm text-gray-600">text-sm: Small text</p>
105 <p class="text-base text-gray-700">text-base: Base text (default)</p>
106 <p class="text-lg text-gray-800">text-lg: Large text</p>
107 <p class="text-xl text-gray-900">text-xl: Extra large text</p>
108 <p class="text-2xl font-bold text-gray-900">text-2xl font-bold</p>
109 <p class="text-3xl font-bold text-gray-900">text-3xl font-bold</p>
110 </div>
111 </section>
112
113 <!-- Colors Section -->
114 <section class="mb-16">
115 <h2 class="text-3xl font-bold text-gray-900 mb-8">Color System</h2>
116 <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
117 <div class="bg-red-500 text-white p-6 rounded-lg text-center font-semibold">Red</div>
118 <div class="bg-yellow-500 text-white p-6 rounded-lg text-center font-semibold">Yellow</div>
119 <div class="bg-green-500 text-white p-6 rounded-lg text-center font-semibold">Green</div>
120 <div class="bg-blue-500 text-white p-6 rounded-lg text-center font-semibold">Blue</div>
121 <div class="bg-purple-500 text-white p-6 rounded-lg text-center font-semibold">Purple</div>
122 </div>
123 </section>
124
125 <!-- State Variants Section -->
126 <section class="mb-16">
127 <h2 class="text-3xl font-bold text-gray-900 mb-8">State Variants</h2>
128 <div class="grid md:grid-cols-3 gap-6">
129 <!-- Hover -->
130 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-2xl hover:scale-105 transition-all duration-300 cursor-pointer">
131 <h3 class="text-xl font-bold mb-2">Hover Effect</h3>
132 <p class="text-gray-600">Hover to see scale and shadow</p>
133 <code class="text-xs bg-gray-100 px-2 py-1 rounded mt-2 block">
134 hover:shadow-2xl hover:scale-105
135 </code>
136 </div>
137
138 <!-- Focus -->
139 <div>
140 <h3 class="text-xl font-bold mb-4">Focus Effect</h3>
141 <input
142 type="text"
143 placeholder="Click to focus"
144 class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 focus:outline-none transition"
145 >
146 <code class="text-xs bg-gray-100 px-2 py-1 rounded mt-2 block">
147 focus:border-blue-500 focus:ring-2
148 </code>
149 </div>
150
151 <!-- Active -->
152 <div>
153 <h3 class="text-xl font-bold mb-4">Active Effect</h3>
154 <button class="w-full bg-purple-600 hover:bg-purple-700 active:bg-purple-900 text-white font-semibold py-3 px-6 rounded-lg transition transform active:scale-95">
155 Press Me
156 </button>
157 <code class="text-xs bg-gray-100 px-2 py-1 rounded mt-2 block">
158 active:bg-purple-900 active:scale-95
159 </code>
160 </div>
161 </div>
162 </section>
163
164 <!-- Complete Card Example -->
165 <section class="mb-16">
166 <h2 class="text-3xl font-bold text-gray-900 mb-8">Complete Component</h2>
167 <div class="grid md:grid-cols-3 gap-8">
168 <div class="group bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden">
169 <div class="h-48 bg-gradient-to-br from-blue-400 to-purple-600"></div>
170 <div class="p-6">
171 <h3 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition">
172 Product Card
173 </h3>
174 <p class="text-gray-600 leading-relaxed mb-4">
175 Complete card with all utilities: layout, spacing, colors, typography, and hover effects.
176 </p>
177 <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition transform hover:scale-105 active:scale-95">
178 Learn More
179 </button>
180 </div>
181 </div>
182
183 <div class="group bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden">
184 <div class="h-48 bg-gradient-to-br from-green-400 to-blue-600"></div>
185 <div class="p-6">
186 <h3 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-green-600 transition">
187 Service Card
188 </h3>
189 <p class="text-gray-600 leading-relaxed mb-4">
190 Responsive design with flexbox, consistent spacing using the 4px scale system.
191 </p>
192 <button class="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-3 rounded-lg transition transform hover:scale-105 active:scale-95">
193 Get Started
194 </button>
195 </div>
196 </div>
197
198 <div class="group bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden">
199 <div class="h-48 bg-gradient-to-br from-pink-400 to-orange-600"></div>
200 <div class="p-6">
201 <h3 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-pink-600 transition">
202 Feature Card
203 </h3>
204 <p class="text-gray-600 leading-relaxed mb-4">
205 Group hover effects, proper color contrast, accessible interactive states.
206 </p>
207 <button class="w-full bg-pink-600 hover:bg-pink-700 text-white font-semibold py-3 rounded-lg transition transform hover:scale-105 active:scale-95">
208 Explore
209 </button>
210 </div>
211 </div>
212 </div>
213 </section>
214 </main>
215
216 <!-- Footer -->
217 <footer class="bg-gray-900 text-white py-12 mt-20">
218 <div class="max-w-7xl mx-auto px-4 text-center">
219 <p class="text-lg mb-2">🎨 Built with Tailwind CSS Utilities</p>
220 <p class="text-gray-400 text-sm">Layout • Spacing • Typography • Colors • State Variants</p>
221 </div>
222 </footer>
223</body>
224</html>This comprehensive demonstration showcases all core Tailwind utility classes in action:
Layout Utilities:
flex, items-center, justify-betweengrid-cols-1 md:grid-cols-2 lg:grid-cols-4gap for spacing between flex/grid itemsSpacing System:
p-4, p-6, p-8 (4px scale)mx-autospace-y-4, space-x-8Typography:
text-xs to text-5xlfont-medium, font-semibold, font-boldleading-relaxedColor System:
bg-blue-500, bg-blue-600bg-gradient-to-br from-blue-400 to-purple-600State Variants:
hover:bg-blue-700, hover:shadow-2xl, hover:scale-105focus:ring-2, focus:border-blue-500active:scale-95, active:bg-purple-900group-hover:text-blue-600Professional Patterns:
Every element demonstrates production-ready Tailwind usage with no custom CSS required!
Excellent! You now know the core Tailwind utilities that you'll use every day. You can build layouts with flexbox/grid, apply consistent spacing, style typography professionally, and use the color system effectively. In the next lesson, "Responsive Design with Tailwind," you'll learn how to make everything responsive using breakpoint prefixes (sm:, md:, lg:) and build mobile-first layouts. Get ready to make your designs work beautifully on every screen size!
Your progress is saved in this browser, on this device only.