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

Tailwind CSS v4.3 从入门到实战Vite 安装、响应式布局、暗黑模式与主题配置

news 2026/7/13 5:50:21

前言

传统前端项目中，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-demonpminstall

3.2 安装 Tailwind CSS

npminstalltailwindcss @tailwindcss/vite

3.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> ) }