Chapter 1: Getting Started

Haiyue
7min

Chapter 1: Getting Started

Learning Objectives
  • Understand the design philosophy and advantages of Tailwind CSS
  • Master the installation and basic configuration of Tailwind CSS 4.1
  • Learn the utility-first CSS methodology
  • Familiarize yourself with basic class naming rules and conventions

Key Concepts

What is Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides a large number of low-level utility classes, allowing developers to build custom designs directly in HTML without writing custom CSS.

Core Features:

  • Utility-First: Build complex designs by composing small utility classes
  • Highly Customizable: Fully customizable design system
  • Responsive Design: Built-in responsive utility classes
  • Modern Build: Supports JIT mode and on-demand generation

Differences from Traditional CSS Frameworks

FeatureTraditional Frameworks (e.g., Bootstrap)Tailwind CSS
Design ApproachPre-built ComponentsUtility Class Composition
CustomizabilityLimited Customization OptionsFully Customizable
File SizeFixed Size (Larger)On-Demand Generation (Smaller)
Learning CurveLearn Pre-built ComponentsLearn Utility Class System

Tailwind CSS 4.1 New Features

Tailwind CSS 4.1 Highlights
  • Better TypeScript support
  • Improved JIT compilation performance
  • New utility classes and variants
  • More powerful configuration system

Installation and Configuration

1. Install via npm

# Create a new project
mkdir my-tailwind-project
cd my-tailwind-project

# Initialize npm project
npm init -y

# Install Tailwind CSS
npm install -D tailwindcss

# Generate configuration file
npx tailwindcss init

2. Configure tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  // Specify file paths to scan
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
    "./*.html"
  ],
  theme: {
    extend: {
      // Extend the default theme here
    },
  },
  plugins: [
    // Add plugins here
  ],
}

3. Create CSS File

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

4. Build CSS

# Development mode (watch for file changes)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

# Production mode (minified output)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

Utility-First Methodology

Traditional CSS Development Approach

/* Traditional approach: write CSS classes first */
.btn {
  padding: 12px 24px;
  background-color: #3b82f6;
  color: white;
  border-radius: 6px;
  border: none;
  font-weight: 500;
}

.btn:hover {
  background-color: #2563eb;
}
<!-- Then use in HTML -->
<button class="btn">Click me</button>

Tailwind CSS Approach

<!-- Use utility classes directly in HTML -->
<button class="px-6 py-3 bg-blue-500 text-white rounded-md font-medium hover:bg-blue-600">
  Click me
</button>
Advantages of Utility-First
  1. Rapid Development: No need to switch back and forth between CSS files
  2. Avoid Naming Difficulties: No need to think of class names
  3. Easy to Maintain: Styles and HTML are in the same location
  4. Reduce CSS Redundancy: Won’t produce unused CSS code

Basic Class Naming Rules

Spacing System

Tailwind uses a numeric system to represent spacing:

<!-- Padding -->
<div class="p-4">Padding 16px</div>
<div class="px-4 py-2">Horizontal padding 16px, vertical padding 8px</div>

<!-- Margin -->
<div class="m-4">Margin 16px</div>
<div class="mx-auto">Horizontally centered</div>

Spacing Mapping Table:

ClassPixel Valuerem Value
14px0.25rem
28px0.5rem
416px1rem
832px2rem

Color System

<!-- Background color -->
<div class="bg-red-500">Red background</div>
<div class="bg-blue-100">Light blue background</div>

<!-- Text color -->
<p class="text-gray-700">Dark gray text</p>
<p class="text-green-600">Green text</p>

Responsive Prefixes

<!-- Responsive design -->
<div class="w-full md:w-1/2 lg:w-1/3">
  <!--
  - Default: full width
  - Medium screens: half width
  - Large screens: one-third width
  -->
</div>

First Tailwind Page

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting Started with Tailwind CSS</title>
    <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <!-- Title -->
        <h1 class="text-3xl font-bold text-gray-800 mb-8 text-center">
            Welcome to Tailwind CSS
        </h1>

        <!-- Card -->
        <div class="max-w-md mx-auto bg-white rounded-lg shadow-md p-6">
            <h2 class="text-xl font-semibold text-gray-700 mb-4">
                My First Tailwind Component
            </h2>
            <p class="text-gray-600 mb-4">
                This is a simple card component built with Tailwind CSS,
                demonstrating the use of basic layout, color, and spacing utility classes.
            </p>
            <button class="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200">
                Get Started
            </button>
        </div>
    </div>
</body>
</html>
Important Notes
  1. Ensure the content path is correctly configured in tailwind.config.js
  2. Use the --watch parameter during development to automatically rebuild
  3. Remember to use the --minify parameter to compress files in production

Summary

Through this chapter, you should have:

  • Understood the core philosophy of Tailwind CSS
  • Completed the development environment setup
  • Mastered basic utility class usage
  • Created your first Tailwind page

In the next chapter, we will dive deeper into Tailwind CSS core utility classes, including layout, Flexbox, and responsive design.