# Tailwind CSS v4 基础知识 (2025/2026) ## 概述 Tailwind CSS v4.0 于 2025 年 1 月 22 日发布，具有基于 Rust 的引擎完全重写、CSS 优先配置以及显着的性能改进。 ### v3 的主要变化特色 | v3 | v4 ---|---|--- 配置| JavaScript (tailwind.config.js) | CSS优先（@theme指令）发动机| Node.js | Rust（快 10 倍）颜色格式|十六进制/RGB | OKLCH（感知统一）插件 | JS 文件 | @plugin指令自定义实用程序 | JS 配置 | @实用程序指令 PostCSS 导入 | postcss-导入 |内置自动前缀 |必填|内置 CSS 嵌套 | postcss 嵌套 |内置内容检测|显式配置 |自动 ## 安装 ### Vite项目（推荐） npm install -D tailwindcss @tailwindcss/vite // vite.config.js 从“@tailwindcss/vite”导入 tailwindcss 从“vite”导入{defineConfig} 导出默认的defineConfig({ 插件：[tailwindcss()] }) ### PostCSS 项目 npm install -D tailwindcss @tailwindcss/postcss // postcss.config.mjs 导出默认值{ 插件：{ “@tailwindcss/postcss”：{} } } ### CSS 入口点 /* app.css - 唯一需要的 CSS 文件 */ @导入“tailwindcss”； ## CSS-优先配置 ### @theme 指令将 tailwind.config.js 替换为基于 CSS 的配置： @导入“tailwindcss”； @主题{ /* 使用现代 oklch 的颜色 */ --颜色主色：oklch(0.6 0.2 250); --颜色次要：oklch(0.7 0.15 180); --颜色强调：oklch(0.8 0.2 30); /* 版式 */ --font-display: "Satoshi"，无衬线字体； --font-body: “国际米兰”，无衬线字体； /* 自定义间距 */ --间距-xs: 0.25rem; --spacing-sm: 0.5rem; --间距-md: 1rem; --间距-lg: 2rem; --spacing-xl: 4rem; /* 自定义断点 */ --断点-xs: 475px; --breakpoint-3xl: 1920px; } ### 主题变量参考类别 |可变模式|示例 ---|---|--- 颜色 | `--颜色-*` | `--颜色品牌-500` 字体| `--font-*` | `--字体标题` 间距| `--间距-*` | `--spacing-4` 断点| `--断点-*` | `--断点-3xl` 半径 | `--radius-*` | `--半径-lg` 阴影| `--shadow-*` | `--shadow-xl` 动画 | `--animate-*` | `--动画淡入` 宽松| `--ease-*` | `--轻松弹跳` ### 禁用默认值 @主题{ /* 重新开始 - 禁用所有默认主题值 */ --*：初始； /* 只定义你需要的 */ --间距：4px； --font-body: 国际米兰，无衬线字体； --颜色主色：oklch(0.72 0.11 221.19); --颜色次要：oklch(0.74 0.17 40.24); } ## 自定义实用程序 ### 静态实用程序 /* 在 CSS 中定义自定义实用程序 */ @实用程序内容自动{ 内容可见性：自动； } @实用程序文本平衡{ 文本换行：平衡； } @实用程序滚动条隐藏{ -ms-overflow-style：无；滚动条宽度：无； } @utilityscrollbar-hide::-webkit-scrollbar{ 显示：无； } 用途：

长标题应该很好地平衡

### 实用工具 /* 接受值的实用程序 */ @实用程序选项卡-* { 制表符大小：--值（整数）； } @实用程序文本阴影-* { 文本阴影：0 0 --value([长度]) currentColor; } /* 带有主题参考 */ @实用程序间隙安全-* { 间隙：最大值（--值（--spacing-*），env（安全区域插入底部））； } 用途：

带有 4 个空格制表符的代码

发光文字

安全区域感知间隙

## 自定义变体 ### @custom-variant 指令 /* 带选择器的深色模式 */ @custom-variant dark (&:where(.dark, .dark *)); /* 自定义状态变体 */ @custom-variant 骗局（&：悬停，&：焦点）； @custom-variant group-hocus (:merge(.group):hover &, :merge(.group):focus &); /* 数据属性变体 */ @custom-variant 数据加载 (&[data-loading="true"]); @custom-variant data-active (&[data-state="active"]); /* 子选择器 */ @custom-variant 子级 (& > *); @custom-variant not-first (& > *:not(:first-child)); 用途：

正在加载...

第 1 项
第 2 项

## 加载插件 ### @plugin 指令 @导入“tailwindcss”； /* 加载官方插件 */ @plugin“@tailwindcss/版式”； @plugin“@tailwindcss/forms”； @plugin“@tailwindcss/容器查询”； /* 加载本地插件 */ @plugin“./my-plugin.js”； ### 带有选项的插件 @plugin“@tailwindcss/版式”{ 类名：所见即所得； } @plugin“@tailwindcss/forms”{ 策略：类； } ## 使用前缀 @import“tailwindcss”前缀（tw）； @主题{ /* 定义不带前缀 */ --font-display: "Satoshi"，无衬线字体； }

内容

生成的 CSS 变量包含前缀：：根{ --tw-font-display: “中本聪”，无衬线字体； } ## 代码中的 CSS 变量 ### 将 theme() 替换为 var() /* v3 方法（已弃用）*/ .旧方式{ 背景颜色：主题（colors.red.500）； } /* v4 方法 */ .新方式{ 背景颜色：var(--color-red-500); } /* 在媒体查询中，使用 CSS 变量名 */ @media（宽度>=主题（--breakpoint-xl））{ /* 样式 */ } ## 核心实用程序类别 ### 布局

### 间距

### 版式

Tailwindcss 基础知识 V4

包含技能