技术篇：从零开始掌握 Tailwind CSS

难度等级： ⭐

学习目标：初步掌握 Tailwind CSS

本文是 Next.js 全栈独立开发指南 系列教程的第三篇，完整教程请点击 https://xiaobot.net/p/indieguide

什么是 Tailwind CSS

Tailwind CSS 是一个高度实用 CSS 框架。它的核心理念是「让你写更少的自定义 CSS」，通过提供原子化的实用工具类，使开发者可以直接在 HTML 中组合和使用这些类来完成页面的样式设置，而不需要再编写额外的 CSS 代码。这种方法的优点是提高了开发效率，减少了重复代码的编写，并且有助于保持样式的一致性，帮助开发者快速构建复杂的用户界面。

Tailwind CSS 的安装

Tailwind CSS 的安装方式有很多种，比如 Tailwind CLI、Post CSS、Framework、CDN 等。

使用 Tailwind CLI 安装

如果你的项目使用了 npm 或者 yarn，那么可以通过以下命令安装 Tailwind CSS：

yarn add tailwindcss -D

安装完成后，可以使用 Tailwind CSS 官方提供的 CLI 工具来生成一个配置文件：

npx tailwindcss init

这会在你的项目根目录下生成一个 tailwind.config.js 文件，你可以在其中自定义 Tailwind 的配置，例如颜色、字体、间距等。

使用 CDN

如果你不想使用构建工具，可以直接在 HTML 文件中通过 CDN 引入 Tailwind CSS：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            base: '#da373d',
          }
        }
      }
    }
  </script>
</head>
<body>
    <div class="container mx-auto p-4">
        <h1 class="text-3xl font-bold underline text-base">
            Hello, Tailwind CSS!
        </h1>
        <p class="mt-4">
            一个最基本的前端项目，展示了如何使用 Tailwind CSS 的基础功能。
        </p>
    </div>
</body>
</html>

Tailwind CSS 还给我们提供了一个快速预览的工具：https://play.tailwindcss.com/ 可以直接编写代码预览效果。

Tailwind CSS 的基本用法

Tailwind CSS 提供了一系列的实用工具类，用于控制常见的 CSS 属性，例如颜色、排版、布局、间距等。下面是一些常用的类：

布局类

flex: 将容器设为 Flexbox 布局。
grid: 将容器设为 Grid 布局。
block: 设置元素为块级元素。
inline-block: 设置元素为内联块级元素。
hidden: 隐藏元素。

间距类

p-4: 设置内边距为 1rem（16px）。
m-4: 设置外边距为 1rem（16px）。
space-x-4: 设置子元素之间的水平间距为 1rem（16px）。
space-y-4: 设置子元素之间的垂直间距为 1rem（16px）。

颜色类

text-blue-500: 设置文字颜色为蓝色。
bg-red-500: 设置背景颜色为红色。
border-green-500: 设置边框颜色为绿色。

大小类

w-1/2: 设置元素宽度为父元素的 50%。
h-screen: 设置元素高度为视口高度。

示例用法：

<div class="flex flex-col items-center justify-center h-screen bg-gray-100">
  <!-- 标题 -->
  <h1 class="text-2xl text-blue-500 mb-4">Tailwind CSS 示例</h1>

  <!-- 内容区域 -->
  <div class="grid grid-cols-2 gap-4 w-1/2 p-4 bg-white border border-gray-300 rounded-lg">
    <!-- 子元素1 -->
    <div class="p-4 bg-red-500 text-white">子元素 1</div>
    <!-- 子元素2 -->
    <div class="p-4 bg-green-500 text-white">子元素 2</div>
    <!-- 子元素3 -->
    <div class="p-4 bg-blue-500 text-white">子元素 3</div>
    <!-- 子元素4 -->
    <div class="p-4 bg-yellow-500 text-white">子元素 4</div>
  </div>

  <!-- 底部按钮 -->
  <button class="mt-8 p-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">
    点击这里
  </button>
</div>

Tailwind CSS 高级技巧

自定义配置

Tailwind CSS 提供了高度灵活的主题自定义功能，允许你根据项目需求定制颜色、字体、间距等全局样式。在 tailwind.config.js 中，你可以通过 extend 选项来扩展默认主题：

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#4F46E5',
        secondary: '#9333EA',
      },
      spacing: {
        '128': '32rem',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
}

通过这种方式，你可以在项目中使用如 text-primary、bg-secondary 等类名，从而实现样式的统一和复用。

动态响应式设计

Tailwind CSS 的响应式设计能力非常强大。它通过简洁的类名组合，允许你为不同屏幕尺寸定义不同的样式。响应式设计的核心在于使用 Tailwind 提供的断点（breakpoints）前缀，如 sm:, md:, lg:, xl: 等。

sm: ：应用于小屏幕及以上的设备，默认宽度为 640px 及以上的设备。适用于手机。
md: ：应用于中等屏幕及以上的设备，默认宽度为 768px 及以上的设备。适用于平板。
lg: ：应用于大屏幕及以上的设备，默认宽度为 1024px 及以上的设备。适用于小型笔记本电脑。
xl: ：应用于超大屏幕及以上的设备，默认宽度为 1280px 及以上的设备。适用于台式机显示器。

此外，还有一个 2xl: 前缀，针对非常大的屏幕，默认宽度为 1536px 及以上的设备。

用法示例

<div class="text-base sm:text-lg lg:text-xl">
  这段文字的大小会根据屏幕宽度变化。
</div>

在这个例子中：

在默认状态下，文字大小为 text-base。
当屏幕宽度达到 640px 或更大时，文字大小变为 text-lg。
当屏幕宽度达到 1024px 或更大时，文字大小变为 text-xl。

如果只设置

会是什么效果？如果你只设置了以下的类：