Tailwind CSS

Lesson 3: Utility-First CSS Framework

Grade 11 Web Development

Classroom Guidelines

1 Experiment with utility class combinations
2 Help classmates understand Tailwind concepts
3 Complete all hands-on activities
4 Ask questions about anything unclear

Learning Outcomes

Understand the utility-first CSS philosophy
Use Tailwind's spacing and color system effectively
Build responsive layouts with Tailwind's breakpoints
Create custom components using utility classes
Compare Tailwind CSS with Bulma CSS

Why Tailwind CSS Matters

Tailwind CSS is the industry standard in modern web development. It provides complete design control while maintaining consistency and performance.

Unlike traditional frameworks, Tailwind doesn't impose design decisions - it gives you the tools to build exactly what you envision.

Quick Tailwind Demonstration

Responsive Column 1

This adjusts based on screen size

Responsive Column 2

Mobile: 1 column, Desktop: 3 columns

Responsive Column 3

Built with Tailwind's grid system

Utility-First Philosophy

Traditional CSS Approach

/* CSS File - styles.css */
.btn-primary {
    padding: 12px 24px;
    background-color: #3b82f6;
    color: white;
    border-radius: 6px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #2563eb;
}

.btn-danger {
    background-color: #ef4444;
}

.btn-danger:hover {
    background-color: #dc2626;
}

/* HTML File */
<button class="btn-primary">Save</button>
<button class="btn-primary btn-danger">Delete</button>

Tailwind CSS Approach

<!-- No separate CSS file needed -->
<button class="px-6 py-3 bg-blue-500 text-white 
           rounded-lg font-semibold hover:bg-blue-600 
           transition-colors">
    Save
</button>

<button class="px-6 py-3 bg-red-500 text-white 
           rounded-lg font-semibold hover:bg-red-600 
           transition-colors">
    Delete
</button>

Tailwind's Building Blocks

Spacing

p-4, m-2, mt-8

Padding, margin, and gap utilities

Colors

bg-blue-500, text-red-600

Background, text, and border colors

Typography

text-lg, font-bold

Font size, weight, and alignment

Layout

flex, grid-cols-3

Flexbox and Grid utilities

Borders

border, rounded-lg

Border styles and radius

Effects

shadow-lg, hover:scale-105

Shadows, transitions, transforms

Practice: Convert CSS to Tailwind

Convert this traditional CSS to Tailwind utility classes:

/* Traditional CSS */
.card {
    padding: 20px;
    margin-top: 16px;
    background-color: #10b981;
    color: white;
    border-radius: 12px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 1px solid #059669;
}

Tailwind Classes Solution:

p-5 mt-4 bg-emerald-500 text-white rounded-xl font-bold text-center shadow-md border border-emerald-600

Try applying these classes to a div element and see the result.

Responsive Design with Tailwind

Mobile-First Breakpoint System

Tailwind uses a mobile-first approach where styles apply to all screen sizes, then you can override them for larger screens.

<!-- Mobile: 1 column, Tablet: 2 columns, Desktop: 4 columns -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
    <div class="p-4 bg-blue-50 border rounded">Item 1</div>
    <div class="p-4 bg-blue-50 border rounded">Item 2</div>
    <div class="p-4 bg-blue-50 border rounded">Item 3</div>
    <div class="p-4 bg-blue-50 border rounded">Item 4</div>
</div>

sm: (Small)

≥640px

sm:text-lg

md: (Medium)

≥768px

md:flex

lg: (Large)

≥1024px

lg:w-1/2

xl: (Extra Large)

≥1280px

xl:grid-cols-4

2xl: (2X Large)

≥1536px

2xl:container

Hands-On: Build a Responsive Card

Create a card component that responds differently on various screen sizes:

Full width on mobile devices
Half width on tablets (≥768px)
One-third width on desktops (≥1024px)
Include padding, shadow, and rounded corners

Your Tailwind Code:

Live Preview:

Card Title

This card should be responsive. On mobile it takes full width, on tablet half width, and on desktop one-third width.

Resize your browser window to see the responsiveness.

Comparing Tailwind and Bulma

Bulma CSS (Component-Based)

<!-- Bulma Button -->
<button class="button is-primary is-large is-rounded">
    Click me
</button>

<!-- Bulma Card -->
<div class="card">
    <div class="card-content">
        <p class="title">Card Title</p>
    </div>
</div>

<!-- Bulma Grid -->
<div class="columns">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
</div>

Strengths:

Excellent for beginners and rapid prototyping
Human-readable, semantic class names
Consistent design out of the box
No JavaScript required
Great for projects where design consistency is priority

Tailwind CSS (Utility-First)

<!-- Tailwind Button -->
<button class="px-6 py-3 bg-blue-500 text-white 
           rounded-full text-lg font-semibold 
           hover:bg-blue-600 transition-colors">
    Click me
</button>

<!-- Tailwind Card -->
<div class="p-6 shadow-lg rounded-lg border">
    <p class="text-2xl font-bold">Card Title</p>
</div>

<!-- Tailwind Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="p-4">Column 1</div>
    <div class="p-4">Column 2</div>
</div>

Strengths:

Complete design control and customization
Smaller CSS file sizes in production
Current industry standard (2026)
Excellent for unique, custom designs
Better for team collaboration on large projects

Framework Selection Exercise

Based on what you've learned about both frameworks, which would you choose for these projects and why?

Project A: University Department Website

Needs to match existing university branding, multiple content editors will maintain it, must be accessible and consistent across all pages.

Bulma CSS Tailwind CSS

Project B: Startup Analytics Dashboard

Unique data visualization needs, complex interactive components, design system needs to be created from scratch, team of 5 developers.

Bulma CSS Tailwind CSS

Final Project: Blog Enhancement

Project Brief

You will enhance a basic blog layout using Tailwind CSS. Start with the provided HTML structure and apply Tailwind utility classes to create a modern, responsive blog.

<!-- Starting HTML Structure -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Tailwind Blog</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <header>
        <h1>My Blog</h1>
        <nav>
            <a href="#">Home</a>
            <a href="#">Articles</a>
            <a href="#">About</a>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Blog Post Title</h2>
            <p>Blog post content goes here...</p>
        </article>
    </main>
    
    <footer>
        <p>© 2026 My Blog</p>
    </footer>
</body>
</html>

Enhancement Requirements

Apply Tailwind CSS to achieve the following:

1. Navigation Bar

Create a responsive navigation bar with logo, links, and mobile hamburger menu.

2. Hero Section

Add a hero section with gradient background, centered title, and call-to-action button.

3. Blog Posts Grid

Create a responsive grid of blog posts (1 column mobile, 2 tablet, 3 desktop).

4. Footer

Design a footer with social links, copyright, and newsletter signup.

Implementation Tips

Use container mx-auto for centering content
Apply md: and lg: prefixes for responsive behavior
Utilize Tailwind's spacing scale (p-4, m-2, gap-4, etc.)
Add hover states with hover: prefix
Use flex and grid for layouts

Submit Your Project

Lesson 3 Completion Checklist

Understand utility-first CSS philosophy
Can use Tailwind's spacing and color system
Can create responsive layouts with breakpoints
Can compare Tailwind and Bulma effectively
Have enhanced a blog layout with Tailwind