# Tailwind CSS v4+ 最佳实践 > 采用 Tailwind v4 的现代实用优先 CSS。 ## v4 中的新增功能特色| v3 | v4 ---|---|--- 配置 | `tailwind.config.js` | CSS优先（`@theme`）颜色 | JS 对象 | CSS 变量性能|准时生产 |氧化物发动机（更快）进口| `@tailwind 基地` | `@import“tailwindcss”` ## 说明 ### 1\.安装（v4） npm install tailwindcss@next @tailwindcss/vite // vite.config.ts 从“@tailwindcss/vite”导入 tailwindcss 导出默认的defineConfig({ 插件：[tailwindcss()]， }) ### 2\. CSS优先配置 /* 应用程序.css */ @导入“tailwindcss”； @主题{ /* 颜色 */ --颜色主色：#3b82f6； --颜色次要：#64748b； --颜色重音：#f59e0b； /* 自定义颜色 */ --颜色品牌-50：#eff6ff； --颜色品牌-500：#3b82f6； --颜色品牌-900：#1e3a8a； /* 字体 */ --font-sans: '国际米兰', sans-serif; --font-mono: 'Fira 代码'，等宽字体； /* 间距 */ --spacing-18: 4.5rem; --spacing-128: 32rem; /* 边界半径 */ --radius-4xl: 2rem; /* 阴影 */ --shadow-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.07); /* 动画 */ --animate-fade-in：淡入0.3秒缓出； } @关键帧淡入{ 来自{ 不透明度：0;变换：translateY(-10px); } 至 { 不透明度：1;变换：翻译Y(0)； } } ### 3\.深色模式 /* CSS优先的深色模式 */ @导入“tailwindcss”； @主题{ --颜色背景：#ffffff； --颜色前景：#0a0a0a； } @主题黑暗{ --颜色背景：#0a0a0a； --颜色前景：#fafafa； } // 在组件中的使用

你好

// 切换深色模式 ### 4\.响应式设计（移动优先）

响应式标题

### 5\.容器查询 (v4)

{/* 响应容器，而不是视口 */}

### 6\.组件模式 // 按钮变体 const 按钮变体 = { 主要：“bg-primary 文本-白色悬停：bg-primary/90”，次要：“bg-次要文本-白色悬停：bg-次要/90”，大纲：“边框边框-主要文本-主要悬停：bg-primary/10”，幽灵：“悬停：bg-accent / 10文本前景”， }; // 卡片图案

{孩子}

// 输入模式 <输入类名= W-全圆角 LG 边框边框-灰色-300 深色：边框-灰色-700 bg-白色深色：bg-gray-900 px-4 py-2 文本前景占位符：text-gray-400 焦点：outline-none 焦点：ring-2 焦点：ring-primary/50 禁用：opacity-50 禁用：不允许光标 ” /> ### 7\.动画实用程序 // 悬停效果 <按钮类名=” 过渡-所有持续时间-200 悬停：scale-105 悬停：阴影-lg 活动：scale-95 ” > 点我 // 入口动画

内容以动画形式出现

// 骨架加载

### 8\.网格布局 // 自动调整网格

{items.map(item => )}

// 仪表板布局

内容

### 9\.自定义实用程序 (v4) @实用玻璃{ 背景：rgba(255, 255, 255, 0.1); 背景过滤器：模糊（10px）；边框: 1px 实心 rgba(255, 255, 255, 0.2); } @utility 文本渐变 { 背景：线性渐变（向右，var（--color-primary），var（--color-accent））； -webkit-background-clip：文本； -webkit-text-fill-color：透明； }

渐变文本

### 10\.性能技巧 // ✅ 好 - 使用 cn() 作为条件类从 '@/lib/utils' 导入 { cn }； <按钮类名={cn( “px-4 py-2 圆角-lg”，变体 === 'primary' && "bg-primary text-white", 禁用 &&“opacity-50 光标不允许” )}> // ❌ 不好 - 模板文字有很多条件 <按钮 className={`px-4 py-2 ${variant === 'primary' ? 'bg-primary' : ''}`}> ## cn() 实用程序 // lib/utils.ts 从 'clsx' 导入 { clsx, type ClassValue }; 从 'tailwind-merge' 导入 { twMerge }；导出函数 cn(...输入: ClassValue[]) { 返回 twMerge(clsx(输入)); } ## 参考文献 * [Tailwind CSS v4 文档]() * [Tailwind CSS 博客]()

顺风

包含技能