Frontend Academy · 课时

Tailwind CSS：实用优先方法

直接在 HTML 中应用预构建的实用类，在 tailwind.config.js 中自定义主题，并使用 @apply 提取重复模式。

Tailwind CSS：实用优先方法 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是实用程序优先 CSS

Tailwind CSS 为每个 CSS 属性提供预构建的实用程序类。无需编写自定义 CSS，只需直接在 HTML 中添加实用程序类来组合样式。一个类对应一条 CSS 声明。

安装 Tailwind

安装 Tailwind 并初始化配置。Vite 项目可以使用 Tailwind Vite 插件或 PostCSS 插件。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

# Or with Vite plugin:
npm install -D @tailwindcss/vite

实用程序类实战

仅使用 Tailwind 实用程序类构建卡片。无需创建自定义 CSS 文件。

<div class="bg-white rounded-lg shadow-md p-6 max-w-sm">
  <img class="w-full h-48 object-cover rounded-md mb-4" src="..." alt="...">
  <h2 class="text-xl font-semibold text-gray-800">Card Title</h2>
  <p class="text-gray-500 mt-2">Card description goes here.</p>
  <button class="mt-4 w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-colors">
    Read More
  </button>
</div>

响应式前缀

添加响应式断点前缀。md: 会在中等屏幕及更大的屏幕上应用。lg: 会在大屏幕上应用。Tailwind 采用移动优先策略。

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

状态变体

使用状态变体作为类的前缀：hover:、focus:、active:、disabled:、dark:。

<button class="bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed">

配置主题

在 tailwind.config.js 中自定义颜色、间距、字体和断点。您可以扩展默认主题，也可以替换其中的部分内容。

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        brand: { 500: '#6366f1', 600: '#4f46e5' }
      },
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans]
      }
    }
  }
}

@apply——提取模式

在 CSS 文件中使用 @apply，将实用程序类组合成可复用的 CSS 规则。请谨慎使用，因为在大多数情况下，直接使用实用程序类更受推荐。

/* Only for highly repeated patterns */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-indigo-600 text-white rounded-md
           hover:bg-indigo-700 transition-colors font-medium;
  }
}

清除未使用的 CSS

Tailwind 会生成数千个实用程序类。在生产环境中，它会扫描源文件并移除所有未使用的类，从而生成很小的 CSS 文件（通常小于 10KB）。

Tailwind 与 React/Vue

在 React 中，使用 cn()（clsx + twMerge）有条件地应用 Tailwind 类，同时避免冲突。在 Vue 中，使用 :class 绑定。

import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...classes: string[]) { return twMerge(clsx(classes)); }

<div className={cn('rounded-lg p-4', featured && 'border-2 border-indigo-600')}>

Tailwind IntelliSense

安装 Tailwind CSS IntelliSense VSCode 扩展，即可获得自动补全、悬停时的类名预览，以及未知类的代码检查功能。这会显著改善 Tailwind 的开发体验。

Tailwind 的批评与辩护

批评者认为：HTML 中充满了许多类，更难阅读。支持者认为：您不再需要编写 CSS，所有样式都与使用位置放在一起，并且通过配置强制执行设计系统。大多数持续使用 Tailwind 的团队都表示生产力有所提高。

快速检查

Tailwind 会生成数千个实用程序类，那么它如何处理生产包的大小？

回顾：Tailwind CSS

实用程序优先：一个类对应一个 CSS 属性。大多数情况下无需自定义 CSS。支持响应式和状态前缀（md:、hover:）。使用 tailwind.config.js 进行自定义。使用 @apply 表示重复模式。生产构建会扫描并清除未使用的类。在 React 中使用 cn() + twMerge 创建条件类。安装 IntelliSense 扩展。

常见问题解答

「Tailwind CSS：实用优先方法」课时是免费的吗？

是的 — 「Tailwind CSS：实用优先方法」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「Tailwind CSS：实用优先方法」这节课中我会学到什么？

直接在 HTML 中应用预构建的实用类，在 tailwind.config.js 中自定义主题，并使用 @apply 提取重复模式。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「Tailwind CSS：实用优先方法」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy