第 1 章：入门基础

Haiyue2025/9/1大约 4 分钟

第 1 章：入门基础

学习目标

理解 Tailwind CSS 的设计理念和优势
掌握 Tailwind CSS 4.1 的安装和基本配置
了解实用优先（utility-first）的CSS方法论
熟悉基本的类名规则和命名约定

知识点

什么是 Tailwind CSS

Tailwind CSS 是一个实用优先（utility-first）的 CSS 框架，它提供了大量低级别的工具类，让开发者可以直接在 HTML 中构建自定义设计，而不需要编写自定义 CSS。

核心特点：

实用优先：通过组合小的工具类来构建复杂的设计
高度可定制：可以完全定制设计系统
响应式设计：内置响应式工具类
现代化构建：支持 JIT 模式和按需生成

与传统 CSS 框架的区别

特性	传统框架（如 Bootstrap）	Tailwind CSS
设计方法	预制组件	工具类组合
定制性	有限的定制选项	完全可定制
文件大小	固定大小（较大）	按需生成（更小）
学习曲线	学习预制组件	学习工具类系统

Tailwind CSS 4.1 新特性

Tailwind CSS 4.1 亮点

更好的 TypeScript 支持
改进的 JIT 编译性能
新增工具类和变体
更强大的配置系统

安装与配置

1. 通过 npm 安装

# 创建新项目
mkdir my-tailwind-project
cd my-tailwind-project

# 初始化 npm 项目
npm init -y

# 安装 Tailwind CSS
npm install -D tailwindcss

# 生成配置文件
npx tailwindcss init

2. 配置 tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 指定要扫描的文件路径
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
    "./*.html"
  ],
  theme: {
    extend: {
      // 在这里扩展默认主题
    },
  },
  plugins: [
    // 在这里添加插件
  ],
}

3. 创建 CSS 文件

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

4. 构建 CSS

# 开发模式（监听文件变化）
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

# 生产模式（压缩输出）
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

实用优先方法论

传统 CSS 开发方式

/* 传统方式：先写CSS类 */
.btn {
  padding: 12px 24px;
  background-color: #3b82f6;
  color: white;
  border-radius: 6px;
  border: none;
  font-weight: 500;
}

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

<!-- 然后在HTML中使用 -->
<button class="btn">点击我</button>

Tailwind CSS 方式

<!-- 直接在HTML中使用工具类 -->
<button class="px-6 py-3 bg-blue-500 text-white rounded-md font-medium hover:bg-blue-600">
  点击我
</button>

实用优先的优势

快速开发：不需要来回切换CSS文件
避免命名困难：不需要想类名
易于维护：样式和HTML在同一位置
减少CSS冗余：不会产生未使用的CSS代码

基本类名规则

间距系统

Tailwind 使用数字系统来表示间距：

<!-- Padding -->
<div class="p-4">内边距 16px</div>
<div class="px-4 py-2">水平内边距 16px，垂直内边距 8px</div>

<!-- Margin -->
<div class="m-4">外边距 16px</div>
<div class="mx-auto">水平居中</div>

间距映射表：

类名	像素值	rem值
1	4px	0.25rem
2	8px	0.5rem
4	16px	1rem
8	32px	2rem

颜色系统

<!-- 背景色 -->
<div class="bg-red-500">红色背景</div>
<div class="bg-blue-100">浅蓝色背景</div>

<!-- 文本颜色 -->
<p class="text-gray-700">深灰色文本</p>
<p class="text-green-600">绿色文本</p>

响应式前缀

<!-- 响应式设计 -->
<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- 
  - 默认：全宽
  - 中等屏幕：半宽
  - 大屏幕：三分之一宽
  -->
</div>

第一个 Tailwind 页面

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>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">
        <!-- 标题 -->
        <h1 class="text-3xl font-bold text-gray-800 mb-8 text-center">
            欢迎使用 Tailwind CSS
        </h1>
        
        <!-- 卡片 -->
        <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">
                我的第一个 Tailwind 组件
            </h2>
            <p class="text-gray-600 mb-4">
                这是一个使用 Tailwind CSS 构建的简单卡片组件，
                演示了基本的布局、颜色和间距工具类的使用。
            </p>
            <button class="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200">
                开始学习
            </button>
        </div>
    </div>
</body>
</html>

注意事项

确保在 tailwind.config.js 中正确配置了 content 路径
开发时使用 --watch 参数自动重新构建
生产环境记得使用 --minify 参数压缩文件

小结

通过本章学习，你应该已经：

理解了 Tailwind CSS 的核心理念
完成了开发环境的搭建
掌握了基本的工具类使用方法
创建了第一个 Tailwind 页面

下一章我们将深入学习 Tailwind CSS 的核心工具类，包括布局、Flexbox 和响应式设计。