在前面的两节课中,我们已经接触了一些 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>
在 Tailwind CSS 4 中,自定义主题使用 CSS 变量定义。这种方式比之前的 JavaScript 配置更加灵活,也更容易与现有的 CSS 代码集成。
响应式设计是现代 Web 开发的核心要求。Tailwind CSS 提供了强大的响应式工具,让你可以轻松创建适配不同屏幕尺寸的界面。
Tailwind 使用移动优先的设计理念。这意味着基础样式是针对移动设备设计的,然后使用断点前缀来为更大的屏幕添加样式。默认的断点包括:
sm: 640pxmd: 768pxlg: 1024pxxl: 1280px2xl: 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 是另一个强大的布局工具。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 的核心功能,包括主题配置、响应式设计、暗色模式和样式组合。在下一节中,我们将学习如何创建可复用的组件,构建更复杂的布局结构。
这不是一个Tailwind CSS的课程,如果你想了解更多关于Tailwind CSS的知识,请参考我们的Tailwind CSS课程,或者也可以通过官方文档进行学习。