What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS, you use pre-made utility classes to style elements directly in your HTML/JSX.

The Simple Explanation

Styling a website is like decorating a room:

• Traditional CSS: Buy raw materials (paint, fabric, wood), then build and paint everything yourself
• Tailwind CSS: IKEA - pre-made pieces you assemble and combine however you want

Tailwind gives you ready-made "style pieces" that you combine to create any design!

Traditional CSS vs Tailwind

Traditional CSS

/* styles.css */
.button {
  background-color: blue;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
}

<button class="button">Click me</button>

Tailwind CSS

<button class="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold">
  Click me
</button>

No CSS file needed! Everything is in the class names.

Why We Use Tailwind

1. Faster Development

No switching between HTML and CSS files:

// Everything in one place
<div className="max-w-4xl mx-auto p-8 bg-white rounded-lg shadow-lg">
  <h1 className="text-3xl font-bold text-gray-900">Title</h1>
  <p className="text-gray-600 mt-4">Description here</p>
</div>

2. Consistent Design

Tailwind uses a design system with predefined values:

<!-- All spacing uses the same scale -->
<div class="p-4">   <!-- 16px padding -->
<div class="p-8">   <!-- 32px padding -->
<div class="p-12">  <!-- 48px padding -->

<!-- All colors use the same palette -->
<div class="bg-blue-500">  <!-- Standardized blue -->
<div class="bg-blue-600">  <!-- Darker blue -->
<div class="bg-blue-700">  <!-- Even darker -->

No more guessing "should this be 14px or 16px?"!

3. Responsive Design Made Easy

<!-- Mobile: stack vertically, Desktop: side by side -->
<div class="flex flex-col md:flex-row">
  <div>Left</div>
  <div>Right</div>
</div>

<!-- Small text on mobile, large on desktop -->
<h1 class="text-2xl md:text-4xl">Title</h1>

Prefix classes with screen sizes: sm:, md:, lg:, xl:

4. No Naming Fatigue

No more thinking "what should I call this class?":

/* Traditional CSS - naming everything */
.hero-section-primary-heading { }
.card-container-wrapper { }
.button-submit-primary-large { }

<!-- Tailwind - just describe what you want -->
<h1 class="text-4xl font-bold">
<div class="container mx-auto">
<button class="btn-primary">

Understanding Tailwind Classes

Spacing

Padding (p):

<div class="p-4">       <!-- All sides: 16px -->
<div class="px-4">      <!-- Horizontal (left/right): 16px -->
<div class="py-4">      <!-- Vertical (top/bottom): 16px -->
<div class="pt-4">      <!-- Top: 16px -->
<div class="pr-4">      <!-- Right: 16px -->
<div class="pb-4">      <!-- Bottom: 16px -->
<div class="pl-4">      <!-- Left: 16px -->

Margin (m) works the same way:

<div class="m-4">       <!-- All sides -->
<div class="mx-auto">   <!-- Center horizontally -->
<div class="mt-8">      <!-- Top margin -->

Spacing scale:

• 0 = 0px
• 1 = 4px
• 2 = 8px
• 4 = 16px
• 8 = 32px
• 12 = 48px
• 16 = 64px

Colors

<!-- Text colors -->
<p class="text-blue-600">Blue text</p>
<p class="text-gray-900">Dark gray text</p>

<!-- Background colors -->
<div class="bg-blue-600">Blue background</div>
<div class="bg-gray-100">Light gray background</div>

<!-- Color scale: 50, 100, 200, ..., 900 -->
<div class="bg-blue-50">   <!-- Lightest -->
<div class="bg-blue-500">  <!-- Middle -->
<div class="bg-blue-900">  <!-- Darkest -->

Typography

<!-- Font size -->
<p class="text-xs">    <!-- 12px -->
<p class="text-sm">    <!-- 14px -->
<p class="text-base">  <!-- 16px (default) -->
<p class="text-lg">    <!-- 18px -->
<p class="text-xl">    <!-- 20px -->
<p class="text-2xl">   <!-- 24px -->
<p class="text-4xl">   <!-- 36px -->

<!-- Font weight -->
<p class="font-normal">    <!-- 400 -->
<p class="font-medium">    <!-- 500 -->
<p class="font-semibold">  <!-- 600 -->
<p class="font-bold">      <!-- 700 -->

<!-- Text alignment -->
<p class="text-left">
<p class="text-center">
<p class="text-right">

Borders and Rounded Corners

<!-- Borders -->
<div class="border">           <!-- 1px border -->
<div class="border-2">         <!-- 2px border -->
<div class="border-blue-500">  <!-- Border color -->

<!-- Rounded corners -->
<div class="rounded">      <!-- 4px -->
<div class="rounded-lg">   <!-- 8px -->
<div class="rounded-full"> <!-- Fully rounded (circles) -->

Flexbox

<!-- Create flex container -->
<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Flex direction -->
<div class="flex flex-row">      <!-- Horizontal (default) -->
<div class="flex flex-col">      <!-- Vertical -->

<!-- Justify (horizontal alignment) -->
<div class="flex justify-start">    <!-- Left -->
<div class="flex justify-center">   <!-- Center -->
<div class="flex justify-between">  <!-- Space between -->

<!-- Align (vertical alignment) -->
<div class="flex items-start">   <!-- Top -->
<div class="flex items-center">  <!-- Middle -->
<div class="flex items-end">     <!-- Bottom -->

<!-- Gap between items -->
<div class="flex gap-4">  <!-- 16px gap -->

Width and Height

<!-- Fixed width -->
<div class="w-64">     <!-- 256px -->
<div class="w-96">     <!-- 384px -->

<!-- Percentage width -->
<div class="w-full">   <!-- 100% -->
<div class="w-1/2">    <!-- 50% -->
<div class="w-1/3">    <!-- 33.333% -->

<!-- Max width (responsive containers) -->
<div class="max-w-4xl">   <!-- 896px max -->
<div class="max-w-7xl">   <!-- 1280px max -->

<!-- Height -->
<div class="h-64">     <!-- 256px -->
<div class="h-screen"> <!-- Full viewport height -->

Shadows

<div class="shadow-sm">     <!-- Small shadow -->
<div class="shadow">        <!-- Medium shadow -->
<div class="shadow-lg">     <!-- Large shadow -->
<div class="shadow-xl">     <!-- Extra large shadow -->

Responsive Design

Add prefixes for different screen sizes:

<!-- Mobile-first approach -->
<div class="text-base md:text-lg lg:text-xl">
  <!-- 16px on mobile, 18px on tablet, 20px on desktop -->
</div>

<div class="p-4 md:p-8 lg:p-12">
  <!-- Padding increases on larger screens -->
</div>

Breakpoints:

• sm: - 640px and up (mobile landscape)
• md: - 768px and up (tablet)
• lg: - 1024px and up (laptop)
• xl: - 1280px and up (desktop)
• 2xl: - 1536px and up (large desktop)

Hover and Interactive States

<!-- Hover effects -->
<button class="bg-blue-600 hover:bg-blue-700">
  Hover me
</button>

<!-- Focus (for accessibility) -->
<input class="border focus:border-blue-500 focus:ring-2">

<!-- Active (when clicking) -->
<button class="active:scale-95">
  Press me
</button>

<!-- Disabled state -->
<button class="disabled:opacity-50 disabled:cursor-not-allowed">
  Submit
</button>

Common Patterns in Our Codebase

1. Container

<div className="max-w-7xl mx-auto px-4">
  {/* Content centered with max width and padding */}
</div>

2. Button

<button className="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors">
  Click me
</button>

3. Card

<div className="p-6 bg-white rounded-lg shadow-lg">
  <h3 className="text-xl font-bold mb-4">Card Title</h3>
  <p className="text-gray-600">Card content</p>
</div>

4. Centered Content

<div className="flex items-center justify-center min-h-screen">
  <div>Centered content</div>
</div>

5. Grid Layout

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

Real Example from Our Codebase

From app/page.tsx (homepage):

<div className="relative isolate overflow-hidden bg-gradient-to-b from-blue-50 to-white py-20">
  <div className="mx-auto max-w-7xl px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
        Every Student Can Achieve Their Full Academic Potential
      </h1>
      <p className="mt-6 text-lg leading-8 text-gray-600">
        The K12worX Learning Jamboree connects motivated high school student
        tutors with underserved K-8 students.
      </p>
    </div>
  </div>
</div>

Breaking this down:

• relative: Positioning context
• overflow-hidden: Hide overflow
• bg-gradient-to-b from-blue-50 to-white: Blue to white gradient
• py-20: Vertical padding
• mx-auto max-w-7xl: Centered with max width
• text-4xl sm:text-6xl: Responsive text size
• font-bold tracking-tight: Bold with tight letter spacing

Custom Styles in Our Project

We have some custom utilities in app/globals.css:

.btn-primary {
  @apply px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all;
}

.card {
  @apply bg-white rounded-lg shadow-md p-6;
}

Use these like any Tailwind class:

<button className="btn-primary">Click me</button>
<div className="card">Content</div>

Tailwind Configuration

Our tailwind.config.ts customizes Tailwind:

export default {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        // Custom colors defined here
      },
    },
  },
}

You can add custom colors, spacing, fonts, etc. here.

Tips for Using Tailwind

1. Use VS Code Extension

Tailwind CSS IntelliSense extension provides:

• Autocomplete for class names
• Linting for errors
• Hover preview of styles

Install it from the Extensions marketplace!

2. Learn Common Patterns

You'll use these repeatedly:

• max-w-*xl mx-auto px-* - Centered container
• flex items-center gap-* - Horizontal layout
• grid grid-cols-* gap-* - Grid layout
• text-* font-* text-* - Typography

3. Mobile-First

Start with mobile, then add larger breakpoints:

<!-- ✅ Good: Mobile-first -->
<div class="text-base md:text-lg">

<!-- ❌ Avoid: Desktop-first -->
<div class="text-lg md:text-base">

4. Group Related Classes

For readability:

<div className="
  max-w-7xl mx-auto px-4
  py-12
  bg-white rounded-lg shadow-lg
">

Common Mistakes

1. Too Many Classes

// ❌ Hard to read
<div className="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-1">

// ✅ Better: Extract to custom class
<button className="btn-primary">

2. Forgetting Responsive Prefixes

// ❌ Same size on all screens
<div className="w-64">

// ✅ Responsive
<div className="w-full md:w-64">

3. Hardcoding Colors

// ❌ Non-standard color
<div className="text-[#1a2b3c]">

// ✅ Use theme colors
<div className="text-gray-900">

External Resources

Essential Documentation

Tailwind CSS Docs: https://tailwindcss.com/docs

• What it is: Official documentation with searchable reference
• When to use: Daily reference for classes and utilities
• Tip: Use the search bar - type what you want (e.g., "padding")

Tailwind Cheat Sheet: https://nerdcave.com/tailwind-cheat-sheet

• What it is: Quick reference for all classes
• When to use: Finding the right class name quickly

Interactive Learning

Tailwind Play: https://play.tailwindcss.com/

• What it is: Online Tailwind editor
• When to use: Experiment with classes before adding to code
• Tip: Great for testing responsive designs!

Scrimba - Learn Tailwind CSS: https://scrimba.com/learn/tailwind

• What it is: Interactive Tailwind course
• When to use: Structured learning path
• Time: 1-2 hours

Video Learning

Tailwind CSS Crash Course: https://www.youtube.com/watch?v=UBOj6rqRUME

• What it is: 1-hour video covering Tailwind basics
• When to use: Visual learners wanting quick overview
• Time: 1 hour

UI Component Libraries

Tailwind UI: https://tailwindui.com/

• What it is: Official component examples (some free, some paid)
• When to use: Finding inspiration for component designs

Headless UI: https://headlessui.com/

• What it is: Unstyled, accessible components we use in our project
• When to use: Building dropdowns, modals, tabs, etc.

Summary

Tailwind CSS is:

• Utility-first CSS framework
• Style with classes, not custom CSS
• Mobile-first responsive design
• Consistent design system

Key concepts:

• Utilities: Single-purpose classes (px-4, text-lg)
• Responsive: Prefix with breakpoints (md:, lg:)
• States: Hover, focus, active (hover:, focus:)
• Composition: Combine classes to create designs

Common classes to know:

• Spacing: p-*, m-*, px-*, py-*
• Colors: bg-*, text-*
• Typography: text-*, font-*
• Layout: flex, grid, max-w-*
• Borders: border, rounded

In our project:

• All styling done with Tailwind
• Custom utilities in globals.css
• Responsive mobile-first design
• VS Code extension for autocomplete

Learning approach:

1. Learn common patterns first
2. Reference docs when needed
3. Experiment in Tailwind Play
4. Copy from existing components

You'll become proficient quickly by doing!

Congratulations!

You've completed Section 01: Understanding Basics! You now know:

• ✅ What Next.js is and how routing works
• ✅ TypeScript basics and type safety
• ✅ React components, props, and state
• ✅ Tailwind CSS utility classes
• ✅ HTML/CSS fundamentals

Next Up

Time to get hands-on! Let's clone the repository and run the website:

Continue to Section 02: Getting Started →

---

Quick Links

• ← What is React?
• Back to Understanding Basics
• Continue to Getting Started →