Chapter 2: Core Utility Classes

Haiyue
12min

Chapter 2: Core Utility Classes

Learning Objectives
  • Master layout-related utility classes (display, position, float, etc.)
  • Proficiently use Flexbox and Grid layout utility classes
  • Learn spacing setup (margin, padding) and size control
  • Understand the breakpoint system for responsive design

Display and Positioning

Display Utility Classes

<!-- Block element -->
<div class="block">Block display</div>

<!-- Inline element -->
<span class="inline">Inline display</span>

<!-- Inline-block -->
<div class="inline-block">Inline-block display</div>

<!-- Flex container -->
<div class="flex">Flex container</div>

<!-- Grid container -->
<div class="grid">Grid container</div>

<!-- Hidden element -->
<div class="hidden">Hidden element</div>

Position Positioning

<!-- Static positioning (default) -->
<div class="static">Static positioning</div>

<!-- Relative positioning -->
<div class="relative">
  <div class="absolute top-0 right-0">Absolutely positioned child</div>
</div>

<!-- Fixed positioning -->
<div class="fixed top-4 right-4">Fixed to top right</div>

<!-- Sticky positioning -->
<div class="sticky top-0">Sticky navigation</div>

Positioning Offsets

<div class="relative">
  <!-- Top offset -->
  <div class="absolute top-4">16px from top</div>

  <!-- Multi-direction offset -->
  <div class="absolute top-4 left-4">16px from top and left</div>

  <!-- Center positioning -->
  <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
    Perfectly centered
  </div>
</div>

Flexbox Layout

Flex Container Properties

<!-- Basic Flex container -->
<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

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

Main Axis Alignment (justify-content)

<!-- Main axis alignment -->
<div class="flex justify-start">Left align (default)</div>
<div class="flex justify-center">Center align</div>
<div class="flex justify-end">Right align</div>
<div class="flex justify-between">Space between</div>
<div class="flex justify-around">Space around</div>
<div class="flex justify-evenly">Space evenly</div>

Cross Axis Alignment (align-items)

<!-- Cross axis alignment -->
<div class="flex items-start h-24">Top align</div>
<div class="flex items-center h-24">Vertical center</div>
<div class="flex items-end h-24">Bottom align</div>
<div class="flex items-stretch h-24">Stretch align</div>

Flex Item Properties

<div class="flex">
  <!-- Flex grow -->
  <div class="flex-1">Auto fill remaining space</div>
  <div class="flex-none">No grow or shrink</div>
  <div class="flex-auto">Auto adjust based on content</div>

  <!-- Self alignment -->
  <div class="self-start">Individual top align</div>
  <div class="self-center">Individual center align</div>
  <div class="self-end">Individual bottom align</div>
</div>

Practical Application Examples

<!-- Navigation bar layout -->
<nav class="flex items-center justify-between p-4 bg-white shadow">
  <div class="flex items-center space-x-4">
    <img src="logo.png" alt="Logo" class="h-8 w-8">
    <span class="font-semibold text-lg">Brand Name</span>
  </div>
  <div class="flex items-center space-x-6">
    <a href="#" class="text-gray-600 hover:text-gray-900">Home</a>
    <a href="#" class="text-gray-600 hover:text-gray-900">About</a>
    <a href="#" class="text-gray-600 hover:text-gray-900">Contact</a>
  </div>
</nav>

<!-- Card layout -->
<div class="flex flex-col bg-white rounded-lg shadow-md overflow-hidden">
  <img src="image.jpg" alt="Image" class="w-full h-48 object-cover">
  <div class="flex-1 p-4">
    <h3 class="text-lg font-semibold mb-2">Card Title</h3>
    <p class="text-gray-600 mb-4">Card content description...</p>
    <div class="flex justify-between items-center">
      <span class="text-sm text-gray-500">2024-01-15</span>
      <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
        View Details
      </button>
    </div>
  </div>
</div>

Grid Layout

Basic Grid Container

<!-- Basic grid -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-100 p-4">Grid item 1</div>
  <div class="bg-blue-100 p-4">Grid item 2</div>
  <div class="bg-blue-100 p-4">Grid item 3</div>
  <div class="bg-blue-100 p-4">Grid item 4</div>
  <div class="bg-blue-100 p-4">Grid item 5</div>
  <div class="bg-blue-100 p-4">Grid item 6</div>
</div>

Responsive Grid

<!-- Responsive columns -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <div class="bg-green-100 p-4">Responsive grid item</div>
  <div class="bg-green-100 p-4">Responsive grid item</div>
  <div class="bg-green-100 p-4">Responsive grid item</div>
  <div class="bg-green-100 p-4">Responsive grid item</div>
</div>

Grid Item Spanning

<div class="grid grid-cols-4 gap-4">
  <!-- Span 2 columns -->
  <div class="col-span-2 bg-red-100 p-4">Span 2 columns</div>
  <div class="bg-blue-100 p-4">Normal item</div>
  <div class="bg-blue-100 p-4">Normal item</div>

  <!-- Span entire row -->
  <div class="col-span-4 bg-yellow-100 p-4">Span entire row</div>

  <!-- Span 3 columns -->
  <div class="col-span-3 bg-green-100 p-4">Span 3 columns</div>
  <div class="bg-blue-100 p-4">Normal item</div>
</div>

Practical Application: Blog Layout

<div class="grid grid-cols-1 lg:grid-cols-4 gap-6 max-w-6xl mx-auto p-6">
  <!-- Main content area -->
  <main class="lg:col-span-3">
    <article class="bg-white rounded-lg shadow-md p-6 mb-6">
      <h1 class="text-2xl font-bold mb-4">Article Title</h1>
      <div class="flex items-center text-sm text-gray-600 mb-4">
        <span>Author: John Doe</span>
        <span class="mx-2">•</span>
        <span>2024-01-15</span>
      </div>
      <div class="prose">
        <p>Article content...</p>
      </div>
    </article>
  </main>

  <!-- Sidebar -->
  <aside class="space-y-6">
    <div class="bg-white rounded-lg shadow-md p-4">
      <h3 class="font-semibold mb-3">Popular Articles</h3>
      <ul class="space-y-2">
        <li><a href="#" class="text-sm text-blue-600 hover:underline">Article 1</a></li>
        <li><a href="#" class="text-sm text-blue-600 hover:underline">Article 2</a></li>
      </ul>
    </div>
  </aside>
</div>

Spacing System

Padding

<!-- All-around padding -->
<div class="p-4">16px padding all around</div>

<!-- Directional padding -->
<div class="pt-4">Top padding</div>
<div class="pr-4">Right padding</div>
<div class="pb-4">Bottom padding</div>
<div class="pl-4">Left padding</div>

<!-- Axis padding -->
<div class="px-4">Horizontal padding</div>
<div class="py-4">Vertical padding</div>

<!-- Combined usage -->
<div class="px-6 py-3">Horizontal 24px, Vertical 12px</div>

Margin

<!-- All-around margin -->
<div class="m-4">16px margin all around</div>

<!-- Auto margin for centering -->
<div class="mx-auto max-w-md">Horizontally centered container</div>

<!-- Negative margin -->
<div class="mb-4">
  <div class="bg-blue-500 h-20"></div>
  <div class="bg-red-500 h-20 -mt-4">Overlap 16px upward</div>
</div>

Spacing System Reference Table

ClassSpacing ValuePixel Equivalent
000px
px1px1px
0.50.125rem2px
10.25rem4px
20.5rem8px
30.75rem12px
41rem16px
51.25rem20px
61.5rem24px
82rem32px
102.5rem40px
123rem48px

Size Control

Width

<!-- Fixed width -->
<div class="w-32">Fixed width 128px</div>
<div class="w-64">Fixed width 256px</div>

<!-- Percentage width -->
<div class="w-1/2">50% width</div>
<div class="w-1/3">33.33% width</div>
<div class="w-2/3">66.67% width</div>
<div class="w-1/4">25% width</div>
<div class="w-3/4">75% width</div>

<!-- Special width -->
<div class="w-full">100% width</div>
<div class="w-screen">100vw width</div>
<div class="w-auto">Auto width</div>

<!-- Max/min width -->
<div class="max-w-md">Max width 28rem</div>
<div class="min-w-0">Min width 0</div>

Height

<!-- Fixed height -->
<div class="h-32">Fixed height 128px</div>

<!-- Percentage height -->
<div class="h-1/2">50% height</div>

<!-- Special height -->
<div class="h-screen">100vh height</div>
<div class="h-auto">Auto height</div>

<!-- Max/min height -->
<div class="min-h-screen">Min height 100vh</div>
<div class="max-h-64">Max height 256px</div>

Responsive Design

Breakpoint System

BreakpointMin WidthCSS
sm640px@media (min-width: 640px)
md768px@media (min-width: 768px)
lg1024px@media (min-width: 1024px)
xl1280px@media (min-width: 1280px)
2xl1536px@media (min-width: 1536px)

Responsive Utility Classes

<!-- Responsive display -->
<div class="block md:hidden">Only display on small screens</div>
<div class="hidden md:block">Only display on medium and larger screens</div>

<!-- Responsive layout -->
<div class="flex flex-col md:flex-row">
  <!-- Vertical on small screens, horizontal on medium and larger -->
</div>

<!-- Responsive sizing -->
<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- Full width on small, half on medium, third on large -->
</div>

<!-- Responsive spacing -->
<div class="p-4 md:p-6 lg:p-8">
  <!-- Different padding for different screen sizes -->
</div>

Responsive Practice Examples

<!-- Responsive card grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-4">
  <div class="bg-white rounded-lg shadow-md p-6">
    <h3 class="text-lg font-semibold mb-2">Card Title</h3>
    <p class="text-gray-600 text-sm md:text-base">
      Responsive text size
    </p>
    <button class="w-full sm:w-auto mt-4 px-4 py-2 bg-blue-500 text-white rounded">
      Button
    </button>
  </div>
</div>

<!-- Responsive navigation -->
<nav class="flex flex-col md:flex-row items-start md:items-center justify-between p-4">
  <div class="mb-4 md:mb-0">
    <h1 class="text-xl font-bold">Brand Name</h1>
  </div>
  <div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6">
    <a href="#" class="text-gray-600 hover:text-gray-900">Home</a>
    <a href="#" class="text-gray-600 hover:text-gray-900">About</a>
    <a href="#" class="text-gray-600 hover:text-gray-900">Contact</a>
  </div>
</nav>
Responsive Design Principles
  1. Mobile First: Design for small screens first, then expand upward
  2. Progressive Enhancement: Basic functionality available on all devices
  3. Breakpoint Selection: Choose breakpoints based on content, not devices
  4. Test Validation: Test responsive effects on real devices

Summary

Through this chapter, you should have mastered:

  • Layout Basics: Basic layout utility classes like display and position
  • Flexbox: Modern one-dimensional layout solution
  • Grid: Powerful two-dimensional layout system
  • Spacing Control: Systematic use of padding and margin
  • Size Control: Flexible setting of width and height
  • Responsive Design: Adaptation strategy based on breakpoints

These utility classes form the core of Tailwind CSS and are the foundation for building complex layouts. In the next chapter, we will learn about styling and beautification utility classes.