Tailwind CSS v4深度解析！新特性、优化、最佳实践

前言

本文主要介绍下Tailwind CSS V4版本更新的一些新特性。

1. 全新引擎

新引擎完全从头重写，带来的是：

速度提高10倍效率提升
占用空间更小
一个依赖项
自定义解析器

1.1 配置方式不同

原先：

less 复制代码

@tailwind base;
@tailwind components;
@tailwind utilities;

新版本

scss 复制代码

@import "tailwindcss";

原先需要配置文件tailwind.config.js,现在默认去除。

2. CSS 配置优先

原先配置是基于tailwind.config.js文件，现在转变为基于纯css的方式配置。

2.1 核心指令@theme

定义自定义主题变量，整个项目可用，tailwind会自动识别此类，可以像其他类一样使用。

现在不需要在配置文件进行任何修改，所有操作都直接在css进行设置，

原先

css 复制代码

module.exports = {
  theme: {
    extend: {
      colors: {
        "custom-blue": "#1e40af"
      },
    },
  },
}

css 复制代码

@theme {
  --custom-blue: #1e40af
}

.bg-custom-blue {
  background-color: var(--custom-blue);
}

2.2 @utility指令

语法更加精简和集中，更容易使用和维护。

css 复制代码

@layer utilities {
  .container {
    padding: 20px;
    max-width: 1200px;
    margin: auto;
  }
}
// 
@utility container {
  padding: 20px;
  max-width: 1200px;
  margin: auto;
}

2.3 默认样式更新

默认样式进行了多项更改，使设计更加直观，开箱即用，对元素如何毫不费力地融入不同的布局非常有用。

例如：其中一个重要更新是如何处理borders，

在先前的版本中，边框使用固定的默认颜色gray-200，多数情况下效果还行，但不是很灵活。如果希望边框颜色与周围文本匹配或动态继承样式，必须为每个实例手动指定一种颜色。

现在边框默认使用当前颜色，自动继承当前文本颜色，这样边框颜色与元素内的文本颜色更加匹配。

2.4 处理占位符文本 placeholders

早期占位符文本具有固定的默认颜色gray-400,文本不是灰色需要手动调整.

现在会自动继承文本颜色并应用默认不透明度50%

2.5 内容检测

以前我们必须在tailwind.config.js中手动定义内容数组，指定哪些文件需要使用，如果不指定tailwind则不处理类，现在扫描项目，并检测哪些文件包含tailwind类，不需要手动配置。还遵循.gitignore，保持性能优化。

但是如果你想要手动进行设置，可以使用@source，而不需要在tailwind.config.js中设置，直接放在css中更加直观, 符合css优先原则。

css 复制代码

module.exports = {
  content: [
    './src/**/*.(html,js,jsx,tx,tsx)'
  ]
}


/* 使用外部ui组件库时特别有用 */
@source './node_modules/some-third-party-lib/**/*.css'

2.6 插件引入@plugin

扩展变得更简单，结合第三方程序如动画等

原先

ini 复制代码

module.exports = {
  plugins:[
    tailwindcssAnimate
  ],
}

现在：

less 复制代码

@plugin "tailwindcss-animate";

2.7 支持媒体查询

以前依赖@tailwindcss/container-queries，现在支持媒体查询，并使用新的 @min-* 和 @max-* 变体来支持容器查询范围。

例如可以使用container针对不同宽度的屏幕进行不同样式的展示：

ini 复制代码

@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>

2.8 @min-* @max-*

ini 复制代码

<div className="@container border p-4">
      <div className="grid grid-cols-3 @max-md:grid-cols-1 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>
    </div>

@max-md 的作用是：当容器宽度 ≤ 中等断点（默认 768px）时，强制将网格列数变为 1 列。这是通过 CSS 容器查询实现的响应式布局控制。

max-w-screen-sm	max-width: 640px;
max-w-screen-md	max-width: 768px;
max-w-screen-lg	max-width: 1024px;
max-w-screen-xl	max-width: 1280px;
max-w-screen-2xl	max-width: 1536px;

@min-* 和 @max-* 组合使用实现不同屏幕的适配

ini 复制代码

<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>

scss 复制代码

.\@min-md\:\@max-xl\:hidden {  
@container (width >= 28rem) {  
@container (width < 36rem) {  
display: none;  
}  
}  
}

2.9 3D Transform APIs

透视和3d

rotate-x-* and rotate-y-*
scale-z-*
translate-z-*
perspectice-*
transform-style-*

scss 复制代码

<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>

scss 复制代码

<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>

2.10 Gradient APIs 渐变

以前仅支持基本线性渐变、从左到右或者上到下

bg-gradient-to-r from-blue-500 to-green-500

bg-linear-* 现在可以45度 bg-linear-45

css 复制代码

<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>

新的渐变类型

Conic-gradient 圆锥由中心点旋转颜色
Radial-gradient 径向由焦点向外扩展

css 复制代码

<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>

2.11 inset-shadow-* inset-ring-*

插入阴影插入环，边界的阴影和环形效果新维度

ini 复制代码

<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>

ini 复制代码

<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"
      />

2.12 调色板

从RGB(sRGB)--> OKLcH

2.13 not-*

:not-*

ini 复制代码

<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>

总结

新版本带来全新的体验升级，主要有：

更快速度，全新的引擎
统一工具链
可组合的变体
零配置内容检测
CSS 配置优先

一起快来试试，如有错误，请指正O^O!