English 中文 العربية 日本語 Português

Tailwind CSS: Tailwind CSS 安装与项目搭建完整指南

1. CDN 快速试玩

最快体验 Tailwind CSS 的方式是通过 CDN 链接，无需任何构建工具，直接在 HTML 文件中引入即可。

▶ 示例

HTML 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CDN 快速试玩</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 flex items-center justify-center">
  <div class="bg-white p-8 rounded-lg shadow-md">
    <h1 class="text-3xl font-bold text-blue-600 mb-4">Hello Tailwind!</h1>
    <p class="text-gray-600">通过 CDN 快速体验 Tailwind CSS</p>
  </div>
</body>
</html>
▶ 试一试

传统 CSS vs Tailwind 传统方式需要编写自定义 CSS 类并链接样式表，而 Tailwind CDN 方式只需一行 <script> 标签即可开始使用所有工具类。

⚠️ 注意： CDN 方式仅适合学习和原型开发，生产环境请使用正式安装方式。

2. Vite + PostCSS 标准安装流程

生产项目推荐使用 Vite + PostCSS 的标准安装方式，可以获得最佳的构建性能和开发体验。

▶ 示例

BASH 
# 创建新项目
npm create vite@latest my-tailwind-app -- --template vanilla
cd my-tailwind-app

# 安装 Tailwind CSS 及依赖
npm install tailwindcss @tailwindcss/vite

# 启动开发服务器
npm run dev

在 vite.config.js 中配置 Tailwind 插件：

JAVASCRIPT 
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

传统 CSS vs Tailwind 传统项目需要手动配置 PostCSS、Autoprefixer 等多个插件，而 Tailwind v4 通过 Vite 插件一键完成所有配置。

3. @import "tailwindcss" 用法

Tailwind CSS v4 使用 @import 语法替代了旧版的 @tailwind 指令，更符合标准 CSS 规范。

▶ 示例

创建主样式文件 src/style.css：

CSS 
@import "tailwindcss";
▶ 试一试

在 HTML 中引入：

HTML 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Import 用法示例</title>
  <link rel="stylesheet" href="/src/style.css">
</head>
<body class="bg-gradient-to-r from-purple-500 to-pink-500 min-h-screen">
  <div class="container mx-auto p-8">
    <h1 class="text-4xl font-bold text-white text-center">
      Tailwind CSS v4
    </h1>
  </div>
</body>
</html>

传统 CSS vs Tailwind 传统方式需要在 CSS 文件中编写大量样式规则，而 Tailwind v4 只需一行 @import "tailwindcss" 即可引入完整的工具类框架。

4. tailwind.config 配置初探

Tailwind CSS v4 支持通过 CSS 文件直接配置，无需单独的 JavaScript 配置文件。

▶ 示例

在 CSS 文件中使用 @theme 指令自定义主题：

CSS 
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --font-family-heading: "Noto Sans SC", sans-serif;
}
▶ 试一试

使用自定义主题：

HTML 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义主题配置</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3b82f6',
            secondary: '#10b981',
          }
        }
      }
    }
  </script>
</head>
<body class="min-h-screen p-8">
  <button class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-blue-700">
    主要按钮
  </button>
  <button class="bg-secondary text-white px-6 py-3 rounded-lg ml-4 hover:bg-green-700">
    次要按钮
  </button>
</body>
</html>

传统 CSS vs Tailwind 传统方式需要定义 CSS 变量并在各处引用，而 Tailwind 的主题配置直接生成对应的工具类，使用更便捷。

5. VS Code 插件推荐

安装 VS Code 插件可以大幅提升 Tailwind CSS 的开发效率。

(1) 必装插件

  1. Tailwind CSS IntelliSense - 提供自动补全、语法高亮和悬停预览
  2. Prettier - 自动格式化和类名排序

▶ 示例

安装插件后，输入类名时会自动弹出补全建议：

HTML 
<!-- 输入 bg- 时会自动提示所有背景色选项 -->
<div class="bg-blue-500">
  
<!-- 输入 text- 时会自动提示所有文字相关选项 -->
<p class="text-lg font-semibold">
  
<!-- 悬停在类名上会显示对应的 CSS 属性 -->
<div class="shadow-lg rounded-xl p-6">
▶ 试一试
💡 提示： 在 VS Code 设置中添加以下配置，可以获得更好的开发体验：

JSON 
{
  "editor.quickSuggestions": {
    "strings": true
  },
  "css.validate": false
}

6. 第一个 Tailwind 项目

让我们创建一个完整的 Tailwind 项目来巩固所学内容。

▶ 示例

完整的项目结构和代码：

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个 Tailwind 项目</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">
  <!-- 导航栏 -->
  <nav class="bg-white shadow-sm">
    <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
      <h1 class="text-xl font-bold text-gray-800">我的网站</h1>
      <div class="space-x-4">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition">首页</a>
        <a href="#" class="text-gray-600 hover:text-blue-600 transition">关于</a>
        <a href="#" class="text-gray-600 hover:text-blue-600 transition">联系</a>
      </div>
    </div>
  </nav>

  <!-- 主内容 -->
  <main class="max-w-7xl mx-auto px-4 py-12">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- 卡片 1 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
        <div class="h-48 bg-gradient-to-br from-blue-400 to-purple-500"></div>
        <div class="p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-2">卡片标题</h3>
          <p class="text-gray-600 text-sm">这是使用 Tailwind CSS 构建的卡片组件示例。</p>
        </div>
      </div>
      <!-- 卡片 2 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
        <div class="h-48 bg-gradient-to-br from-green-400 to-teal-500"></div>
        <div class="p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-2">卡片标题</h3>
          <p class="text-gray-600 text-sm">响应式布局自动适应不同屏幕尺寸。</p>
        </div>
      </div>
      <!-- 卡片 3 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
        <div class="h-48 bg-gradient-to-br from-orange-400 to-red-500"></div>
        <div class="p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-2">卡片标题</h3>
          <p class="text-gray-600 text-sm">无需编写任何自定义 CSS 代码。</p>
        </div>
      </div>
    </div>
  </main>
</body>
</html>
逻辑代码 46 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要为导航栏、卡片、网格等组件分别编写 CSS 文件，而 Tailwind 直接在 HTML 中使用工具类完成所有样式，开发效率大幅提升。

❓ 常见问题

Q CDN 方式和正式安装有什么区别？
A CDN 方式会加载完整的 Tailwind 库（约 300KB），包含所有工具类，适合开发和原型。正式安装通过构建工具按需生成 CSS，生产环境文件通常只有 10-20KB，性能更优。
Q Tailwind CSS v4 和 v3 的配置方式有什么不同？
A v4 使用 CSS 原生的 @theme 指令在样式表中配置，而 v3 使用独立的 tailwind.config.js 文件。v4 更符合 CSS 标准，配置更简洁。
Q 为什么我的 VS Code 没有 Tailwind 自动补全？
A 请确保已安装 Tailwind CSS IntelliSense 插件，并在设置中开启 editor.quickSuggestions.strings。如果使用 PostCSS 安装，还需确保项目根目录有正确的配置文件。
Q 可以同时使用 Tailwind 和自定义 CSS 吗？
A 可以。Tailwind 与原生 CSS 完全兼容，你可以根据需要混合使用。但建议优先使用 Tailwind 工具类，保持代码风格一致。

📖 小节

📝 作业

  1. ⭐ 使用 CDN 方式创建一个包含标题、段落和按钮的简单页面，为每个元素应用至少 3 个 Tailwind 工具类

  2. ⭐⭐ 使用 Vite 正式安装 Tailwind CSS，创建一个包含导航栏和内容区域的页面，并配置自定义主题颜色

  3. ⭐⭐⭐ 创建一个完整的响应式卡片列表页面，要求使用自定义主题配置、悬停效果，并在不同屏幕尺寸下显示不同的列数

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏