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

原创已于 2024-11-14 21:34:21 修改

· 1.9k 阅读

19 ·

版权

文章标签：

#css #前端

于 2024-10-26 23:36:44 首次发布

Next.js 全栈独立开发指南专栏收录该内容

3 篇文章

订阅专栏

难度等级： ⭐

学习目标：初步掌握 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。

如果只设置

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

<div class="sm:bg-green-500 lg:bg-blue-500 p-4">
  内容
</div>

效果如下：

默认情况下（屏幕宽度小于 640px）：
- 背景颜色不会应用 bg-green-500 或 bg-blue-500，所以默认情况下背景颜色保持未设置的状态（通常是透明的）。
当屏幕宽度达到 **640px** 或更大（即 sm 断点及以上）：
- 背景颜色变为绿色 (bg-green-500)。
当屏幕宽度达到 **1024px** 或更大（即 lg 断点及以上）：
- 背景颜色变为蓝色 (bg-blue-500)。

总结：

在小屏幕上（小于 640px），背景颜色是透明的。
在中等屏幕（640px 到 1023px）上，背景颜色是绿色的。
在大屏幕（1024px 及以上）上，背景颜色是蓝色的。

自定义断点配置

这些断点可以通过修改 Tailwind 的配置文件 tailwind.config.js 进行自定义。默认的断点定义如下：

module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
  },
}

暗黑模式 (Dark Mode)

Tailwind CSS 提供了非常方便的暗黑模式支持。你可以通过在 tailwind.config.js 中启用暗黑模式：

module.exports = {
  darkMode: 'class',
}

接着，你可以使用 dark: 前缀为暗黑模式指定样式：

<div class="bg-white text-black dark:bg-black dark:text-white">
  这个容器在暗黑模式下会切换背景色和文字颜色
</div>

这种配置可以根据系统的暗黑模式设置自动切换样式，或者通过手动添加 dark 类名来切换。

Tailwind CSS 最佳实践指南

组织 Tailwind CSS 类名

在实际项目中，HTML 文件中可能会充满大量的 Tailwind 类名。为了提高代码的可读性和可维护性，建议按照功能对类名进行分组。

按布局、排版、颜色等类别对类名进行分组：

<div class="flex items-center justify-between
  bg-gray-100 text-gray-800 p-4
  rounded-lg shadow-md">
  <h1 class="text-xl font-bold">Tailwind CSS Best Practices</h1>
  <button class="bg-brand text-white px-4 py-2 rounded">Learn More</button>
</div>

这种分组方式有助于快速识别不同的样式作用域，减少开发中的认知负担。

利用 @apply 指令复用样式

对于重复使用的样式，可以利用 Tailwind CSS 的 @apply 指令，将其抽象为可复用的 CSS 组件。在样式文件中，将常用的样式组合成类：

.btn-primary {
  @apply bg-brand text-white px-4 py-2 rounded hover:bg-brand-dark;
}

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

然后在 HTML 中通过自定义类名调用这些样式：

<button class="btn-primary">Primary Button</button>
<div class="card">This is a card</div>

这种方式能够显著减少重复的 Tailwind 类名，使代码更简洁。

响应式设计的最佳实践

尽量使用最小数量的断点前缀，避免代码混乱。以下是一个合理的响应式设计示例：

<div class="p-4 sm:p-6 lg:p-8">
  <h2 class="text-lg sm:text-xl lg:text-2xl">Responsive Heading</h2>
</div>

在这里，我们只在必要时才使用不同的断点，确保代码清晰且易于维护。

总结

Tailwind CSS 的灵活性和强大功能使其成为现代 Web 开发中的一大利器。通过其实用工具类的方法，极大地提高了开发者的工作效率，使得 UI 的开发变得更加灵活和快速。Tailwind CSS 不仅适用于简单的项目，也能够通过灵活的高级技巧应对复杂的设计需求。希望通过这篇基础入门文章，你能够快速上手 Tailwind CSS，并在实际项目中运用它来提升开发效率。