前言传统前端项目中CSS 文件容易随着业务增长而不断膨胀类名越来越多、同一套颜色和间距被重复定义、响应式规则分散在多个媒体查询里。Tailwind CSS 使用Utility-First工具类优先的方式把常见样式拆成可组合类名divclassrounded-2xl bg-white p-6 shadow-lgh2classtext-xl font-bold text-slate-900系统运行状态/h2pclassmt-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字体加粗传统 CSSbuttonclasssubmit-button保存数据/button.submit-button{padding:10px 20px;color:white;background:#2563eb;border-radius:8px;}Tailwind CSSbuttonclassrounded-lg bg-blue-600 px-5 py-2.5 text-white保存数据/button二、使用浏览器版本快速体验创建index.html!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleTailwind CSS Demo/titlescriptsrchttps://cdn.jsdelivr.net/npm/tailwindcss/browser4/script/headbodyclassmin-h-screen bg-slate-100 p-6mainclassmx-auto max-w-6xlh1classpy-12 text-center text-4xl font-bold text-slate-900Tailwind CSS 示例/h1sectionclassgrid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3articleclassrounded-2xl bg-white p-6 shadow-lgh2classtext-xl font-bold开发效率/h2pclassmt-3 text-slate-600使用工具类快速完成页面样式。/p/articlearticleclassrounded-2xl bg-white p-6 shadow-lgh2classtext-xl font-bold响应式布局/h2pclassmt-3 text-slate-600适配手机、平板和电脑。/p/articlearticleclassrounded-2xl bg-white p-6 shadow-lgh2classtext-xl font-bold统一设计/h2pclassmt-3 text-slate-600统一颜色、间距、圆角和阴影。/p/article/section/main/body/htmlPlay CDN 适合开发体验和演示生产项目推荐使用构建工具。三、使用 Vite 工程化安装3.1 创建项目npmcreate vitelatest tailwind-demo ----templatevanillacdtailwind-demonpminstall3.2 安装 Tailwind CSSnpminstalltailwindcss tailwindcss/vite3.3 配置vite.config.jsimport{defineConfig}fromviteimporttailwindcssfromtailwindcss/viteexportdefaultdefineConfig({plugins:[tailwindcss()]})3.4 导入 Tailwind CSS在src/style.css中importtailwindcss;3.5 启动项目npmrun dev四、常用工具类4.1 间距divclassmx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8页面主体/divp-*四周内边距px-*左右内边距py-*上下内边距m-*四周外边距mx-auto水平居中mt-*上外边距4.2 Flex 布局divclassflex items-center justify-between gap-4div左侧内容/divdiv右侧内容/div/div4.3 Grid 布局divclassgrid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4divclassrounded-xl bg-white p-5模块一/divdivclassrounded-xl bg-white p-5模块二/divdivclassrounded-xl bg-white p-5模块三/divdivclassrounded-xl bg-white p-5模块四/div/div五、响应式设计Tailwind CSS 采用移动端优先策略。divclassgrid grid-cols-1 md:grid-cols-2 lg:grid-cols-3!-- 手机一列、平板两列、桌面三列 --/div响应式字体h1classtext-3xl md:text-4xl lg:text-6xl响应式标题/h1响应式间距sectionclasspx-4 py-10 md:px-8 lg:px-12 lg:py-20页面内容/section六、状态变体buttonclassrounded-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 配置importtailwindcss;theme{--color-brand-50:#eff6ff;--color-brand-500:#3b82f6;--color-brand-600:#2563eb;--color-brand-700:#1d4ed8;--radius-panel:1.25rem;}使用自定义主题buttonclassrounded-panel bg-brand-600 px-5 py-2.5 text-white hover:bg-brand-700品牌按钮/button八、暗黑模式divclassbg-white text-slate-900 dark:bg-slate-900 dark:text-white支持暗黑模式的内容/div使用类名手动控制暗黑模式importtailwindcss;custom-variantdark(:where(.dark,.dark *));constrootdocument.documentElementconstbuttondocument.querySelector(#theme-button)button.addEventListener(click,(){root.classList.toggle(dark)})九、完整实战后台数据控制台sectionclassmin-h-screen bg-slate-100 px-4 py-12 dark:bg-slate-950divclassmx-auto max-w-7xldivclassmb-8 flex flex-col gap-4 md:flex-row md:items-center md:justify-betweendivh1classtext-3xl font-bold text-slate-900 dark:text-white数据控制台/h1pclassmt-2 text-slate-600 dark:text-slate-400查看当前系统的核心业务指标。/p/divbuttonclassrounded-lg bg-blue-600 px-5 py-2.5 font-semibold text-white hover:bg-blue-700导出数据/button/divdivclassgrid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-4articleclassrounded-2xl bg-white p-6 shadow-sm dark:bg-slate-900pclasstext-sm font-medium text-slate-500总用户数/ppclassmt-4 text-3xl font-bold text-slate-900 dark:text-white12,580/ppclassmt-3 text-sm text-emerald-600较上月增长 12.5%/p/article/div/div/section十、动态类名问题不推荐constcolorblueconstclassNamebg-${color}-500推荐使用完整类名映射constcolorClasses{blue:bg-blue-500,red:bg-red-500,green:bg-green-500}constclassNamecolorClasses[color]十一、React 组件封装示例export default function PrimaryButton({ children, disabled false, onClick }) { return ( button typebutton 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:增强大屏布局。不要忽略焦点状态、标签、颜色对比度和键盘操作。