章
目
录
随着Tailwind CSS v4版本的发布，它带来了一系列令人惊喜的变化和改进。本文将深入探讨v4这些新特性，帮助大家更好地理解和运用这个CSS框架。
一、性能与配置
（一）显著提升的性能表现
Tailwind CSS v4的新引擎是完全重新编写的，这一改变带来了诸多优势。最明显的就是速度大幅提升，相比之前的版本，效率提高了10倍。同时，新引擎占用的空间更小，并且只依赖一个项，使得项目的依赖管理更加简洁。
（二）配置方式的重大转变
- 引入新的导入方式：在配置方式上，v4版本有了很大变化。以前，我们使用的是类似
@tailwind base;、@tailwind components;、@tailwind utilities;这样的配置代码 。而在新版本中，改为使用@import "tailwindcss";这种更为简洁的导入方式。 - 配置文件的调整：之前，Tailwind CSS的配置主要依赖
tailwind.config.js文件。但在v4中，默认情况下这个配置文件被去除了。这意味着许多配置操作不再需要在JavaScript文件中进行，而是更多地转向了CSS文件本身，体现了“CSS配置优先”的理念。
二、CSS配置优先
（一）使用@theme定义自定义主题变量
在v4版本中，@theme指令成为定义自定义主题变量的关键。通过它，我们可以创建整个项目都能使用的自定义变量。比如，以前在tailwind.config.js文件中定义颜色变量，像这样：
module.exports = {
theme: {
extend: {
colors: {
"custom-blue": "#1e40af"
},
},
},
}
现在，使用@theme指令，直接在CSS文件中就能完成同样的操作：
@theme {
--custom-blue: #1e40af
}
.bg-custom-blue {
background-color: var(--custom-blue);
}
这样一来，所有操作都在CSS中进行，无需再频繁切换到配置文件，使用起来更加直观和方便。
（二）@utility指令
@utility指令在v4版本中也得到了优化，语法变得更加精简和集中。这使得我们在定义一些通用的样式类时，更容易使用和维护。比如定义一个container类：
@layer utilities {
.container {
padding: 20px;
max-width: 1200px;
margin: auto;
}
}
// 或者更简洁的方式
@utility container {
padding: 20px;
max-width: 1200px;
margin: auto;
}
（三）默认样式的更新优化
- 边框样式的改进：v4对默认样式进行了多项调整，让设计更加直观。以边框样式为例，在旧版本中，边框默认使用固定的
gray - 200颜色。在很多场景下，这种固定颜色的边框可能不太灵活。比如，当我们希望边框颜色与周围文本颜色匹配时，就需要手动为每个实例指定颜色。而在v4中，边框默认会使用当前颜色，自动继承元素内文本的颜色，这样边框与文本的搭配更加自然和谐。 - 占位符文本的优化：早期版本中，占位符文本有固定的默认颜色
gray - 400。如果页面整体文本颜色不是灰色，就需要手动调整占位符文本的颜色。现在，v4中的占位符文本会自动继承文本颜色，并应用默认的50%不透明度，大大减少了手动调整的工作量。
（四）内容检测的智能化升级
在以前，我们需要在tailwind.config.js文件中手动定义一个内容数组，明确指定哪些文件需要使用Tailwind CSS。如果不进行这个设置，Tailwind就不会处理相关文件中的类。而在v4版本中，它会自动扫描整个项目，检测哪些文件包含Tailwind类，无需手动配置。并且，它还会遵循.gitignore规则，在保证功能的同时优化性能。当然，如果有特殊需求，仍然可以手动设置。不过现在不再是在tailwind.config.js中设置，而是使用@source指令直接在CSS文件中配置，这样更符合“CSS配置优先”的原则。例如：
module.exports = {
content: [
'./src/**/*.(html,js,jsx,tx,tsx)'
]
}
/* 使用外部ui组件库时特别有用 */
@source './node_modules/some-third-party-lib/**/*.css'
（五）插件引入的简化
在扩展Tailwind CSS功能时，v4版本让插件引入变得更加简单。以前引入第三方插件（如动画插件），需要在tailwind.config.js文件中进行配置：
module.exports = {
plugins:[
tailwindcssAnimate
],
}
现在，只需要在CSS文件中使用@plugin指令即可：
@plugin "tailwindcss-animate";
（六）媒体查询与容器查询的增强支持
- 媒体查询的内置支持：在v4之前，使用容器查询需要依赖
@tailwindcss/container - queries。而现在，Tailwind CSS v4原生支持媒体查询，并且新增了@min - *和@max - *变体来支持容器查询范围。这使得我们可以更方便地针对不同宽度的屏幕进行样式调整。 - 响应式布局示例：例如，使用
@container结合@min - *和@max - *变体，实现不同屏幕宽度下的布局变化：
@container (min-width:640px) {
}
<div className="@container border p-4">
<div className="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-4 gap-4">
<div className="bg-blue-500 h-40"></div>
<div className="bg-green-500 h-40"></div>
<div className="bg-red-500 h-40"></div>
<div className="bg-yellow-500 h-40"></div>
</div>
</div>
上述代码中，@max - md的作用是当容器宽度小于等于中等断点（默认768px）时，将网格列数强制变为1列。通过这些变体，我们还可以组合使用实现更复杂的屏幕适配效果。
<div className="@container border p-4">
<div className="flex gap-4">
<div className="bg-blue-500 h-40 w-64"></div>
<div className="bg-green-500 h-40 w-64 @min-md:@max-xl:hidden"></div>
<div className="bg-red-500 h-40 w-64"></div>
</div>
</div>
.\@min-md\:\@max-xl\:hidden {
@container (width >= 28rem) {
@container (width < 36rem) {
display: none;
}
}
}
三、新功能特性
（一）3D Transform APIs：开启3D设计
v4引入了一系列3D Transform相关的API，像透视（perspectice - *）、3D旋转（rotate - x - *、rotate - y - *）、3D缩放（scale - z - *）、3D平移（translate - z - *）以及控制3D元素呈现方式的transform - style - *等。通过这些API，我们可以轻松创建出具有立体感的元素。例如：
<div className="min-h-screen flex items-center justify-center bg-gray-100">
<div className="bg-blue-500 h-96 w-96 flex justify-center items-center text-white text-4xl font-bold transform rotate-x-35 rotate-y-35">
3D Rotate
</div>
</div>
<div className="min-h-screen flex items-center justify-center bg-gray-100 perspective-1000">
<div className="bg-blue-500 h-96 w-96 flex justify-center items-center text-white text-4xl font-bold transform-style-3d transform hover:scale-150 hover:translate-z-20 transition-transform duration-300">
3D Rotate
</div>
</div>
（二）Gradient APIs：多样化渐变效果
- 新增渐变角度与类型：在渐变方面，v4也有很大的改进。以前，Tailwind CSS仅支持基本的线性渐变，方向局限于从左到右或者从上到下。现在，不仅可以创建45度的线性渐变（
bg - linear - 45），还新增了圆锥渐变（Conic - gradient）和径向渐变（Radial - gradient）两种类型。 - 渐变效果示例：例如创建不同类型的渐变效果：
<div className="min-h-screen flex items-center justify-center bg-gray-100">
<div className="bg-linear-45 from-blue-500 to-green-500 p-8 rounded text-2xl font-bold text-white">Angle Gradient</div>
</div>
<div className="min-h-screen flex items-center justify-center bg-gray-100">
<div className="size-64 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600"></div>
<div className="bg-radial from-yellow-500 to-red-500 w-64 h-64 rounded-full"></div>
</div>
（三）inset-shadow-*与inset-ring-*：阴影和环形效果
v4还新增了inset-shadow-*和inset-ring-*功能，用于创建插入阴影和插入环效果，为元素的边界设计增添了新的维度。比如，在输入框上应用这些效果：
<div className="min-h-screen grid gap-4 place-items-center bg-deepblue">
{/* 创建内阴影效果 */}
<input
type="text"
className="inset-shadow-sm inset-shadow-amber-500 border-4 rounded-sm w-96 h-18 p-4 text-xl text-amber outline-none"
placeholder="Enter your name"
/>
{/* 插入阴影和外环效果 */}
<input
type="text"
className="inset-shadow-sm inset-shadow-amber-500 ring-4 rounded-sm w-96 h-18 p-4 text-xl text-amber outline-none"
placeholder="Enter your name"
/>
{/* 内环效果 */}
<input
type="text"
className="inset-ring-4 inset-ring-amber-500 rounded-sm w-96 h-18 p-4 text-xl text-amber outline-none"
placeholder="Enter your name"
/>
</div>
<input
type="text"
className="inset-ring-4 inset-ring-amber-500 ring-4 rounded-sm w-96 h-18 p-4 text-xl text-amber outline-none"
placeholder="Enter your name"
/>
（四）调色板的升级：从RGB(sRGB)到OKLcH
Tailwind CSS v4对调色板进行了升级，从原来的RGB(sRGB)转换为OKLcH。这种调色板的变化可以提供更符合人眼视觉感知的颜色选择，让设计中的颜色搭配更加自然和舒适。
（五）not-*类的使用
not-*类在v4中为我们提供了一种灵活的样式控制方式。通过它，可以对不符合特定条件的元素应用样式。例如：
<div className="min-h-screen flex items-center justify-center bg-gray-100">
<ul className="space-y-4 text-center">
<li className="bg-gray-200 p-4 rounded text-lg not-active:bg-red-500">Item 1</li>
<li className="bg-gray-200 p-4 rounded text-lg ">Item 2(Active)</li>
<li className="bg-gray-200 p-4 rounded text-lg not-active:bg-red-500">Item 3</li>
</ul>
</div>
在上述代码中，当列表项不处于active状态时，会应用not-active:bg-red-500指定的样式，即背景颜色变为红色。
四、总结
Tailwind CSS v4版本带来了全方位的升级，从全新的引擎、更便捷的CSS配置方式，到丰富多样的新功能特性，都为前端开发者提供了更高效、更灵活的开发体验。大家不妨在自己的项目中尝试使用这些新特性，感受Tailwind CSS v4的魅力。如果在使用过程中有任何问题，欢迎一起交流探讨。
