当前位置：首页 > news >正文

02. 快速开始

news 2026/8/23 9:23:29

02. 快速开始

1. 安装方式

Tailwind CSS 有多种安装方式，根据项目类型选择：

方式	适用场景	难度
CDN	快速测试、学习	⭐
Vite + 脚手架	新项目	⭐⭐
PostCSS	现有项目	⭐⭐⭐
CLI	任何项目	⭐⭐

2. 方式一：CDN（最快上手）

适合：快速测试、学习语法

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><scriptsrc="https://cdn.tailwindcss.com"></script><title>Tailwind 测试</title></head><body><divclass="bg-blue-500 text-white p-4 rounded-lg">你好，Tailwind!</div></body></html>

优点：一行代码搞定，立刻使用

缺点：无法自定义主题，生产环境不推荐

3. 方式二：Vite + React（推荐）

适合：React 新项目

步骤 1：创建项目

npmcreate vite@latest my-app ----templatereactcdmy-app

步骤 2：安装 Tailwind CSS v4

npminstalltailwindcss @tailwindcss/vite

步骤 3：配置 Vite

// vite.config.jsimport{defineConfig}from'vite'importreactfrom'@vitejs/plugin-react'importtailwindcssfrom'@tailwindcss/vite'exportdefaultdefineConfig({plugins:[react(),tailwindcss(),],})

步骤 4：引入 Tailwind

/* src/index.css */@import"tailwindcss";

步骤 5：使用

// src/App.jsx function App() { return ( <div className="bg-blue-500 text-white p-4 rounded-lg"> 你好，Tailwind! </div> ) } export default App

步骤 6：运行

npmrun dev

4. 方式三：Vite + Vue

适合：Vue 新项目

# 创建项目npmcreate vite@latest my-vue-app ----templatevuecdmy-vue-app# 安装npminstalltailwindcss @tailwindcss/vite# 配置 vite.config.js（同上）# 引入样式/* src/style.css */ @import"tailwindcss";

<!-- src/App.vue --> <template> <div class="bg-blue-500 text-white p-4 rounded-lg"> 你好，Tailwind! </div> </template>

5. 方式四：纯 HTML + PostCSS

适合：纯 HTML/CSS 项目

步骤 1：初始化项目

mkdirmy-projectcdmy-projectnpminit-y

步骤 2：安装依赖

npminstalltailwindcss @tailwindcss/cli

步骤 3：创建输入 CSS 文件

/* src/input.css */@import"tailwindcss";

步骤 4：编译

npx @tailwindcss/cli-i./src/input.css-o./dist/output.css--watch

步骤 5：引入编译后的 CSS

<!-- index.html --><linkhref="/dist/output.css"rel="stylesheet">

6. 方式五：CLI 独立使用

适合：任何项目

# 全局安装npminstall-gtailwindcss# 初始化tailwindcss init# 创建输入文件echo'@import "tailwindcss";'>input.css# 编译tailwindcss-iinput.css-ooutput.css--watch

7. 第一个完整示例

创建一个简单的卡片组件：

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><scriptsrc="https://cdn.tailwindcss.com"></script><title>我的第一个 Tailwind 页面</title></head><bodyclass="bg-gray-100 p-8"><!-- 卡片组件 --><divclass="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden"><divclass="p-6"><divclass="uppercase tracking-wide text-sm text-indigo-500 font-semibold">特色功能</div><h2class="mt-1 text-xl font-medium text-gray-900">Tailwind CSS 入门</h2><pclass="mt-2 text-gray-500">在 HTML 里写 CSS，不用离开 HTML，就能快速构建界面。</p><buttonclass="mt-4 bg-indigo-500 text-white px-4 py-2 rounded-lg hover:bg-indigo-600 transition-colors">开始学习</button></div></div></body></html>

效果预览：

卡片宽度：max-w-md（最大宽度 448px）
居中：mx-auto（左右自动边距）
背景白色、圆角、阴影
内边距p-6
按钮有悬停效果

8. IDE 插件推荐

VS Code 插件

Tailwind CSS IntelliSense（官方）
- 自动补全类名
- 悬停显示 CSS 效果
- 语法高亮

安装方法

打开 VS Code，按Ctrl+Shift+X，搜索Tailwind CSS IntelliSense，点击安装。

效果

<!-- 输入 bg- 会自动弹出所有背景色选项 --><divclass="bg-"><!-- 下拉列表显示：bg-red-500, bg-blue-500, ... --></div>

9. 常见问题

Q1: 类名不生效？

A: 检查是否正确引入 Tailwind CSS，查看浏览器控制台是否有报错。

Q2: 如何查看所有可用类名？

官方文档：https://tailwindcss.com/docs
安装 VS Code 插件后，输入类名会自动补全

Q3: CDN 和本地安装有什么区别？

对比	CDN	本地安装
自定义主题	❌ 不支持	✅ 支持
生产优化	❌ 全量	✅ 按需
开发体验	一般	好

10. 练习

练习 1：创建一个登录表单

要求：

居中显示
白色背景、圆角、阴影
包含：邮箱输入框、密码输入框、登录按钮
按钮有悬停效果

参考答案：

<divclass="max-w-md mx-auto mt-20 bg-white rounded-lg shadow-lg p-8"><h2class="text-2xl font-bold text-center mb-6">登录</h2><inputtype="email"placeholder="邮箱"class="w-full p-2 mb-4 border rounded focus:outline-none focus:border-blue-500"><inputtype="password"placeholder="密码"class="w-full p-2 mb-6 border rounded focus:outline-none focus:border-blue-500"><buttonclass="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition-colors">登录</button></div>

练习 2：创建一个响应式导航栏

要求：

手机版：垂直排列
电脑版：水平排列

参考答案：

<navclass="bg-white shadow-md p-4"><divclass="container mx-auto flex flex-col md:flex-row justify-between items-center"><divclass="text-xl font-bold mb-4 md:mb-0">Logo</div><divclass="flex flex-col md:flex-row gap-4"><ahref="#"class="hover:text-blue-500">首页</a><ahref="#"class="hover:text-blue-500">关于</a><ahref="#"class="hover:text-blue-500">服务</a><ahref="#"class="hover:text-blue-500">联系</a></div></div></nav>

11. 总结

安装方式	命令/代码	适用场景
CDN	`<script src="https://cdn.tailwindcss.com">`	快速测试
Vite + React	`npm install tailwindcss @tailwindcss/vite`	新 React 项目
Vite + Vue	同上	新 Vue 项目
PostCSS	`npm install tailwindcss @tailwindcss/cli`	纯 HTML 项目