本资料介绍 Tailwind CSS v4.0 的基础内容，面向 2025/2026 年的使用实践。
一、版本背景与主要变化 资料说明 Tailwind CSS v4.0 于 2025 年 1 月 22 日发布，是一次完整重写，采用基于 Rust 的引擎，并带来 CSS 优先配置与性能改进。资料以对照表列出 v3 与 v4 的差异：配置方式由 JavaScript 的 tailwind.config.js 变为 CSS 优先的 @theme 指令；引擎由 Node.js 变为 Rust（资料称 10 倍更快）；颜色格式由 hex/rgb 变为 OKLCH；插件由 JS 文件变为 @plugin 指令；自定义工具类由 JS 配置变为 @utility 指令；PostCSS 导入、Autoprefixer、CSS 嵌套均改为内置；内容检测由显式配置变为自动检测。
二、安装方式 资料提供两种安装路径。Vite 项目（推荐）：执行 npm install -D tailwindcss @tailwindcss/vite，并在 vite.config.js 中引入 @tailwindcss/vite 并加入 plugins。PostCSS 项目：执行 npm install -D tailwindcss @tailwindcss/postcss，并在 postcss.config.mjs 中配置 '@tailwindcss/postcss'。CSS 入口为唯一必需的 CSS 文件，内容为 @import "tailwindcss"。
三、CSS 优先配置 资料说明以 @theme 指令取代 tailwind.config.js。示例中定义了使用 oklch 的颜色变量、字体变量、间距变量与断点变量。资料列出主题变量参考，涵盖颜色、字体、间距、断点、圆角、阴影、动画、缓动等类别及变量命名模式。资料还给出通过 --*: initial 禁用全部默认主题值、随后只定义所需值的方式。
四、自定义工具类与变体 自定义工具类使用 @utility 指令，资料区分静态工具类（如 content-auto、text-balance、scrollbar-hide）与可接收值的函数式工具类（如 tab-、text-shadow-、gap-safe-*），并给出用法示例。自定义变体使用 @custom-variant 指令，示例包括深色模式选择器、hocus、group-hocus、data 属性变体（data-loading、data-active）与子选择器变体（children、not-first）。
五、插件与前缀 插件通过 @plugin 指令加载，可加载官方插件（如 @tailwindcss/typography、@tailwindcss/forms、@tailwindcss/container-queries）或本地插件，并可为插件传入选项。前缀通过在 @import 中使用 prefix(tw) 实现，生成的 CSS 变量会带上前缀。
六、CSS 变量与核心工具类 资料指出 v4 中应以 var() 取代 theme()，并在媒体查询中使用 CSS 变量名。核心工具类部分按布局、间距、排版、颜色、尺寸分组，并介绍任意值与 important 修饰符的用法。
七、内置特性与图层 资料以表格说明 @import 处理、厂商前缀、CSS 嵌套、内容检测在 v4 中均无需额外配置。图层部分演示以 @layer base、@layer components 配合 @apply 使用。
八、最佳实践 资料列出若干实践：使用 OKLCH 颜色构建设计系统；使用 clamp() 实现流体排版与流体间距（并提示 vw 需与 rem 结合以兼顾可访问性）；按类别组织主题变量；保持 @utility 定义简单；采用移动优先的响应式类顺序；为交互元素提供可访问性支持（如最小 44px 触控尺寸、focus-visible 样式、motion-reduce）。
九、常见迁移问题 资料指出三处变化：边框颜色默认由 gray-200 变为 currentColor；ring 默认由 3px blue-500 变为 1px currentColor；按钮使用 cursor: default。并分别给出通过 --default-border-color、--default-ring-width 与 --default-ring-color、以及全局 button { cursor: pointer; } 的修复方式。
分类判断：资料内容围绕 Tailwind CSS 的安装、配置与样式工具类展开，属于前端样式与建站技术，故归入前端与建站。