使用 Tailwind CSS 进行样式设计

在前面的两节课中，我们已经接触了一些 Tailwind CSS 的基础用法。让我们现在单独花点时间了解一下Tailwind CSS 的功能，学习如何创建美观、响应式的用户界面。

Tailwind CSS 4 带来了许多令人兴奋的新特性。最显著的变化是配置方式的简化。不再需要复杂的 JavaScript 配置文件，现在可以直接在 CSS 中使用 @theme 指令来定义主题。

另一个重要的改进是对 CSS 变量的原生支持。这意味着你可以更容易地实现主题切换，包括暗色模式。同时，Tailwind CSS 4 的性能也得到了显著提升，编译速度更快，生成的文件更小。

理解实用类优先的设计理念

Tailwind CSS 采用“实用类优先”的设计理念。这意味着你不需要编写自定义 CSS，而是通过组合预定义的实用类来构建样式。这种方式的优势是多方面的。

首先，你不需要在 HTML 和 CSS 文件之间跳转，所有样式都在 HTML 中可见。其次，实用类都是原子化的，你可以自由组合，创造出无限的可能性。最后，Tailwind 会自动移除未使用的样式，确保最终打包的文件尽可能小。

让我们从一个简单的例子开始：

|
<div className="p-4 bg-blue-500 text-white rounded-lg">
  这是一个使用 Tailwind CSS 的卡片
</div>

在这个例子中，我们分别应用了多个 Tailwind CSS 的实用类来实现卡片的样式。其中，p-4 代表四周都有 1rem（16px）的内边距，可以让内容与卡片边缘保持适当距离；bg-blue-500 设置了较为显眼的蓝色背景色，使卡片视觉层次更丰富；text-white 用于将文本颜色调整为白色，确保在深色背景上有良好的可读性；rounded-lg 则为卡片四角添加了大圆角效果，整体显得更加现代、柔和。 这种实用类组合的方式，不仅让开发者能够灵活快速地进行 UI 设计，还大幅提升了代码的可维护性和一致性，避免了冗余的自定义 CSS。

配置自定义主题

虽然 Tailwind 提供了丰富的默认样式，但很多时候我们需要自定义颜色、字体等来匹配品牌。在 Tailwind CSS 4 中，我们可以使用 @theme 指令来定义主题。

让我们更新 app/globals.css 文件，添加一些自定义主题配置：

|
@import "tailwindcss";
 
@theme {
  --color-brand-primary: #3b82f6;
  --color-brand-secondary: #8b5cf6;
  --color-brand-accent: #f59e0b;
}

这样我们就定义了三个品牌颜色。现在可以在组件中使用它们：

|
<div className="bg-brand-primary text-white p-4 rounded-lg">
  使用品牌主色
</div>

响应式设计

响应式设计是现代 Web 开发的核心要求。Tailwind CSS 提供了强大的响应式工具，让你可以轻松创建适配不同屏幕尺寸的界面。

Tailwind 使用移动优先的设计理念。这意味着基础样式是针对移动设备设计的，然后使用断点前缀来为更大的屏幕添加样式。默认的断点包括：

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

让我们创建一个响应式的卡片布局：

|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div className="bg-white p-6 rounded-lg shadow-md">
    <h3 className="text-xl font-bold mb-2">卡片 1</h3>
    <p className="text-gray-600">这是第一个卡片的内容</p>
  </div>
  <div className="bg-white p-6 rounded-lg shadow-md">
    <h3 className

grid-cols-1 用于定义最基础的单列网格，这意味着无论屏幕尺寸多小，内容都会纵向排列，保证移动端的浏览体验。 通过在类名前加上不同断点前缀，例如 md:grid-cols-2 和 lg:grid-cols-3，我们能够非常直观地为中型屏幕（如平板）切换为两列显示，而在更大的桌面端屏幕则演变为三列排布。 这种基于断点的自适应网格配置，极大地提升了页面在各类设备上的可用性与美观度，开发者可以在不依赖传统媒体查询的情况下，一行代码灵活地控制不同屏幕下的布局变化。

使用 Flexbox 布局

Flexbox 是另一个强大的布局工具。Tailwind 提供了丰富的 Flexbox 实用类。让我们创建一个导航栏示例：

|
<nav className="flex items-center justify-between p-4 bg-white shadow-sm">
  <div className="flex items-center gap-4">
    <span className="text-xl font-bold">Free Education</span>
    <div className="hidden md:flex gap-4">
      <a href="#" className="text-gray-600 hover:text-gray-900">首页</a>
      <a href

在这个导航栏示例中，核心是 flex 类，它让整个 <nav> 容器变成水平弹性布局，这样子元素会自动一行排列。通过 items-center，我们可以确保导航栏内的所有项目在垂直方向上居中对齐，让导航条看起来更整齐。 justify-between 则会把导航内容分布在两端，把 LOGO（或站点名称）推到最左边，而按钮（比如“登录”）推到最右边，中间部分被空间拉开。对于菜单项，我们用了 hidden md:flex，这意思是在窄屏（如手机）时菜单不会显示，而在平板及更大屏幕（md 及以上断点）时， 这段菜单会以弹性布局方式展现出来，这有助于提升移动端用户体验，也让桌面端的导航更丰富、清晰。Tailwind 通过这些组合类，让我们不用写任何自定义 CSS，仅靠类名就实现了复杂的自适应导航布局，非常高效且易于维护。你可以试着调整窗口大小，感受菜单项是如何根据不同屏幕宽度自动切换显示模式的。

实现暗色模式

暗色模式是现代应用的标准功能。Tailwind CSS 4 对暗色模式有很好的支持。首先，我们需要在 globals.css 中配置暗色模式：

|
@import "tailwindcss";
 
@custom-variant dark (&:where(.dark, .dark *));

这个配置告诉 Tailwind 当元素或其父元素有 dark 类时，应用暗色模式样式。

现在让我们创建一个支持暗色模式的组件：

|
<div className="bg-white dark:bg-gray-800 text-gray-900 dark:text-white p-6 rounded-lg">
  <h2 className="text-2xl font-bold mb-4">支持暗色模式</h2>
  <p className="text-gray-600 dark:text-gray-300">
    这个组件会根据主题自动调整颜色
  </p>
</div>

要在应用中切换暗色模式，我们需要使用 JavaScript。我们可以创建一个简单的主题切换组件。首先，我们需要创建一个客户端组件（因为主题切换需要交互）：

|
'use client'
 
import { useState, useEffect } from 'react'
 
export default function ThemeToggle() {
  const [dark, setDark] = useState(false)
 
  useEffect(() => {
    if (dark) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove(

我们在刚才的代码片段最上方写上 'use client'，这是告诉 Next.js 这个文件是客户端组件，必须在浏览器中运行。这样才能响应用户的点击，实现主题的即时切换。

要在实际页面中使用主题切换，只需要把 ThemeToggle 组件引入到你需要显示的位置。例如在你的页面组件顶部加上：

|
import ThemeToggle from './ThemeToggle'
 
export default function Page() {
  return (
    <div>
      <ThemeToggle />
      {/* 其他内容 */}
    </div>
  )
}

这样，按钮就会出现在页面上，当你点击它时，界面的明暗主题就会自动切换，非常方便。

使用渐变和阴影

在网页设计中，渐变和阴影不仅能够让界面看起来更有层次和立体感，还能有效地吸引用户的注意力。Tailwind CSS 针对这些效果，内置了大量易用的工具类，比如渐变（gradient）和阴影（shadow）相关的类。

渐变（Gradient）可以让背景颜色从一种平滑过渡到另一种，打造出非常流行的视觉风格。而阴影（Shadow）则会让元素像是浮在页面之上，让设计更加有空间感。你只需要在元素的 className 属性中添加这些 Tailwind 类名，就可以快速实现漂亮的效果，无需手写复杂的 CSS。

我们来看一个具体例子，演示如何使用渐变和阴影，打造首页 Hero 区域。当你给最外层 div 添加 bg-linear-to-br，就能实现从左上角（Top Left）到右下角（Bottom Right）的背景色渐变。通过 from-blue-500 via-purple-500 to-pink-500，我们让颜色从蓝色经过紫色，最终过渡到粉色。 按钮上则可以加上 shadow-lg 或 hover:shadow-xl，实现在静止和鼠标悬停时不同强度的阴影效果，这样用户交互体验会更友好也更酷炫。

接下来我们编写一个实际代码片段，来实现这样一个拥有精美渐变背景和阴影效果的 Hero 区域演示：

|
<div className="min-h-screen bg-linear-to-br from-blue-500 via-purple-500 to-pink-500">
  <div className="container mx-auto px-4 py-16">
    <h1 className="text-5xl font-bold text-white mb-4">
      Welcome to Free Education
    </h1>
    <p className="text-xl text-white/90 mb-8">
      开启你的学习之旅
    </p>
    <button className="bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold shadow-lg hover:shadow-xl transition-shadow"

这里我们使用了 bg-linear-to-br 来创建从左上到右下的渐变，from-blue-500 via-purple-500 to-pink-500 定义了渐变的颜色。text-white/90 表示白色文字，90% 不透明度。

创建可复用的样式组件

虽然 Tailwind 强调实用类优先，但有时候我们需要创建可复用的样式组合。可以使用 @layer components 来定义自定义组件类。 你可以在 globals.css 中添加这些自定义组件类：

|
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg font-semibold hover:bg-blue-600 transition-colors;
  }
  
  .card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6;
  }
}

现在你可以在组件中使用这些类：

|
<button className="btn-primary">
  点击我
</button>
 
<div className="card">
  <h3 className="text-xl font-bold mb-2">卡片标题</h3>
  <p className="text-gray-600 dark:text-gray-300">卡片内容</p>
</div>

实践：美化首页

让我们将刚刚学到的知识应用到首页。现在我们更新 app/page.tsx 文件为下面的代码：

|
export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50">
      <div className="container mx-auto px-4 py-16">
        <div className="text-center mb-16">
          <h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-4">
            Welcome to Free Education
          </h1>
          <p className

效果如下：

下一步

在这一部分中，我们学习了 Tailwind CSS 4 的核心功能，包括主题配置、响应式设计、暗色模式和样式组合。在下一节中，我们将学习如何创建可复用的组件，构建更复杂的布局结构。