Tailwind CSS v4.3 从入门到实战Vite 安装、响应式布局、暗黑模式与主题配置
前言
传统前端项目中，CSS 文件容易随着业务增长而不断膨胀：类名越来越多、同一套颜色和间距被重复定义、响应式规则分散在多个媒体查询里。
Tailwind CSS 使用Utility-First（工具类优先）的方式，把常见样式拆成可组合类名：
<divclass="rounded-2xl bg-white p-6 shadow-lg"><h2class="text-xl font-bold text-slate-900">系统运行状态</h2><pclass="mt-3 text-slate-600">所有服务运行正常。</p></div>本文基于 Tailwind CSS v4.3，介绍快速体验、Vite 工程化安装、响应式布局、状态变体、自定义主题、暗黑模式和完整后台示例。
一、Tailwind CSS 是什么
Tailwind CSS 是一个工具类优先的 CSS 框架。每个类通常负责一个明确样式：
| 类名 | 作用 |
|---|---|
p-6 | 内边距 |
bg-white | 白色背景 |
rounded-2xl | 大圆角 |
shadow-lg | 阴影 |
text-xl | 字体大小 |
font-bold | 字体加粗 |
传统 CSS：
<buttonclass="submit-button">保存数据</button>.submit-button{padding:10px 20px;color:white;background:#2563eb;border-radius:8px;}Tailwind CSS：
<buttonclass="rounded-lg bg-blue-600 px-5 py-2.5 text-white">保存数据</button>二、使用浏览器版本快速体验
创建index.html：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Tailwind CSS Demo</title><scriptsrc="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script></head><bodyclass="min-h-screen bg-slate-100 p-6"><mainclass="mx-auto max-w-6xl"><h1class="py-12 text-center text-4xl font-bold text-slate-900">Tailwind CSS 示例</h1><sectionclass="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3"><articleclass="rounded-2xl bg-white p-6 shadow-lg"><h2class="text-xl font-bold">开发效率</h2><pclass="mt-3 text-slate-600">使用工具类快速完成页面样式。</p></article><articleclass="rounded-2xl bg-white p-6 shadow-lg"><h2class="text-xl font-bold">响应式布局</h2><pclass="mt-3 text-slate-600">适配手机、平板和电脑。</p></article><articleclass="rounded-2xl bg-white p-6 shadow-lg"><h2class="text-xl font-bold">统一设计</h2><pclass="mt-3 text-slate-600">统一颜色、间距、圆角和阴影。</p></article></section></main></body></html>Play CDN 适合开发体验和演示，生产项目推荐使用构建工具。
三、使用 Vite 工程化安装
3.1 创建项目
npmcreate vite@latest tailwind-demo ----templatevanillacdtailwind-demonpminstall3.2 安装 Tailwind CSS
npminstalltailwindcss @tailwindcss/vite3.3 配置vite.config.js
import{defineConfig}from'vite'importtailwindcssfrom'@tailwindcss/vite'exportdefaultdefineConfig({plugins:[tailwindcss()]})3.4 导入 Tailwind CSS
在src/style.css中：
@import"tailwindcss";3.5 启动项目
npmrun dev四、常用工具类
4.1 间距
<divclass="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">页面主体</div>p-*：四周内边距px-*：左右内边距py-*：上下内边距m-*：四周外边距mx-auto：水平居中mt-*：上外边距
4.2 Flex 布局
<divclass="flex items-center justify-between gap-4"><div>左侧内容</div><div>右侧内容</div></div>4.3 Grid 布局
<divclass="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4"><divclass="rounded-xl bg-white p-5">模块一</div><divclass="rounded-xl bg-white p-5">模块二</div><divclass="rounded-xl bg-white p-5">模块三</div><divclass="rounded-xl bg-white p-5">模块四</div></div>五、响应式设计
Tailwind CSS 采用移动端优先策略。
<divclass="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3"><!-- 手机一列、平板两列、桌面三列 --></div>响应式字体：
<h1class="text-3xl md:text-4xl lg:text-6xl">响应式标题</h1>响应式间距：
<sectionclass="px-4 py-10 md:px-8 lg:px-12 lg:py-20">页面内容</section>六、状态变体
<buttonclass="rounded-lg bg-blue-600 px-5 py-2.5 font-semibold text-white transition hover:bg-blue-700 active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-200 disabled:cursor-not-allowed disabled:opacity-50">保存数据</button>常用状态：
hover:focus:active:disabled:checked:group-hover:
七、自定义主题
Tailwind CSS v4 支持 CSS-first 配置：
@import"tailwindcss";@theme{--color-brand-50:#eff6ff;--color-brand-500:#3b82f6;--color-brand-600:#2563eb;--color-brand-700:#1d4ed8;--radius-panel:1.25rem;}使用自定义主题：
<buttonclass="rounded-panel bg-brand-600 px-5 py-2.5 text-white hover:bg-brand-700">品牌按钮</button>八、暗黑模式
<divclass="bg-white text-slate-900 dark:bg-slate-900 dark:text-white">支持暗黑模式的内容</div>使用类名手动控制暗黑模式：
@import"tailwindcss";@custom-variantdark(&:where(.dark,.dark *));constroot=document.documentElementconstbutton=document.querySelector('#theme-button')button.addEventListener('click',()=>{root.classList.toggle('dark')})九、完整实战：后台数据控制台
<sectionclass="min-h-screen bg-slate-100 px-4 py-12 dark:bg-slate-950"><divclass="mx-auto max-w-7xl"><divclass="mb-8 flex flex-col gap-4 md:flex-row md:items-center md:justify-between"><div><h1class="text-3xl font-bold text-slate-900 dark:text-white">数据控制台</h1><pclass="mt-2 text-slate-600 dark:text-slate-400">查看当前系统的核心业务指标。</p></div><buttonclass="rounded-lg bg-blue-600 px-5 py-2.5 font-semibold text-white hover:bg-blue-700">导出数据</button></div><divclass="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-4"><articleclass="rounded-2xl bg-white p-6 shadow-sm dark:bg-slate-900"><pclass="text-sm font-medium text-slate-500">总用户数</p><pclass="mt-4 text-3xl font-bold text-slate-900 dark:text-white">12,580</p><pclass="mt-3 text-sm text-emerald-600">较上月增长 12.5%</p></article></div></div></section>十、动态类名问题
不推荐：
constcolor='blue'constclassName=`bg-${color}-500`推荐使用完整类名映射：
constcolorClasses={blue:'bg-blue-500',red:'bg-red-500',green:'bg-green-500'}constclassName=colorClasses[color]十一、React 组件封装示例
export default function PrimaryButton({ children, disabled = false, onClick }) { return ( <button type="button" disabled={disabled} onClick={onClick} className=" inline-flex items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-200 disabled:cursor-not-allowed disabled:opacity-50 " > {children} </button> ) }十二、最佳实践
- 使用
@theme统一品牌色、字体、圆角和阴影。 - 避免大量使用任意值，重复值应进入设计系统。
- 不要动态拼接不完整类名。
- 按钮、输入框、标签、卡片和弹窗应封装成组件。
- 优先编写移动端样式，再通过
md:、lg:增强大屏布局。 - 不要忽略焦点状态、标签、颜色对比度和键盘操作。