Tailwind CSS v4.2 新特性解析：新色板、逻辑属性、font-features 与升级实操

Tailwind CSS v4.2 于 2026-02-18 发布，距离 v4.1 大约 10 个月。这个版本没有 v4.0 那种"推倒重来"式的架构变动，但补上了几块 v4 发布以来社区呼声较高的能力——尤其是逻辑属性和字体排版控制方面。

先给一个全景概览：

类别	新特性	一句话说明
色彩	mauve / olive / mist / taupe 四组色板	扩充中性色选择，跳出 gray 的"万年灰"
布局	完整的 CSS 逻辑属性工具类	支持国际化和垂直书写方向的间距、边框、尺寸
排版	`font-features-*` 工具类	控制 OpenType 字体特性，提升中英混排等排版品质
工程	`@tailwindcss/webpack` 插件	给仍在用 Webpack 的项目一条官方集成路径
弃用	`start-` / `end-` → `inline-s-` / `inline-e-`	统一逻辑属性命名体系
修复	color-mix 双重 @supports 包装等多项 bug	升级即受益，无需手动操作

下面逐项展开。

一、四组新色板：mauve / olive / mist / taupe

解决什么问题

Tailwind 从 v3 开始就内置了大量色板，但中性色一直只有 slate、gray、zinc、neutral、stone 这五组。它们确实覆盖了冷灰到暖灰的基本光谱，但如果你想要"带一点点色彩倾向的灰"——比如偏紫的灰、偏绿的灰——就只能自定义。

v4.2 补上了四组：

色板	色彩倾向	适合的设计调性
mauve	偏紫/粉的灰	柔和、文艺、女性化设计
olive	偏绿/黄的灰	自然、户外、环保主题
mist	偏蓝的冷灰	科技感、专业工具、仪表盘
taupe	偏棕/米的暖灰	温馨、复古、内容型网站

每组色板包含完整的 11 级色阶（50–950），使用 OKLCH 色彩空间定义（与 v4.0 的 P3 色板体系一致）。

怎么用

和已有色板用法完全一致：

html

<!-- 背景 -->
<div class="bg-mauve-100 dark:bg-mauve-900">
  <!-- 文字 -->
  <p class="text-olive-700 dark:text-olive-300">
    <!-- 边框 -->
  </p>
 
  <div class="border border-mist-300">
    <!-- 渐变 -->
    <div class="bg-gradient-to-r from-taupe-200 to-taupe-50"></div>
  </div>
</div>

实际建议

如果你的项目已经有一套完善的 CSS 变量色彩系统（比如通过 @theme 自定义主题色），这四组新色板不需要立刻替换现有的 gray-*。但它们在以下场景有价值：

快速原型：不想花时间调色时，拿 mauve 或 mist 替代 gray 能快速拉开风格差异
多主题系统：需要多套"中性色基调"的产品（比如 SaaS 允许用户选主题）
设计系统扩展：在 @theme 中把 mauve 映射为 --color-neutral，让整套 UI 带上微妙的色彩倾向

二、CSS 逻辑属性工具类（完整版）

这是 v4.2 变动面最大的特性。

什么是逻辑属性

传统 CSS 的 top、bottom、left、right 以及对应的 margin-top、padding-left 等，都是基于物理方向的。但 Web 支持不同的书写模式：

水平 LTR（中文、英语）：left = 行首，top = 块首
水平 RTL（阿拉伯语、希伯来语）：right = 行首
垂直书写（传统中文竖排、日文竖排）：top = 行首，right = 块首

CSS 逻辑属性用 block（块轴方向）和 inline（行内方向）替代物理方向，使同一套样式能自动适配不同书写模式。

v4.2 新增的工具类

间距类

工具类	CSS 属性	在水平 LTR 中等同于
`pbs-4`	`padding-block-start`	`pt-4`
`pbe-4`	`padding-block-end`	`pb-4`
`mbs-4`	`margin-block-start`	`mt-4`
`mbe-4`	`margin-block-end`	`mb-4`
`scroll-pbs-4`	`scroll-padding-block-start`	`scroll-pt-4`
`scroll-pbe-4`	`scroll-padding-block-end`	`scroll-pb-4`
`scroll-mbs-4`	`scroll-margin-block-start`	`scroll-mt-4`
`scroll-mbe-4`	`scroll-margin-block-end`	`scroll-mb-4`

边框类

工具类	CSS 属性
`border-bs`	`border-block-start-width`
`border-be`	`border-block-end-width`
`border-bs-2`	`border-block-start-width: 2px`
`border-bs-blue-500`	`border-block-start-color: blue-500`

尺寸类

工具类	CSS 属性	在水平 LTR 中等同于
`inline-64`	`inline-size`	`w-64`
`min-inline-0`	`min-inline-size`	`min-w-0`
`max-inline-lg`	`max-inline-size`	`max-w-lg`
`block-64`	`block-size`	`h-64`
`min-block-0`	`min-block-size`	`min-h-0`
`max-block-screen`	`max-block-size`	`max-h-screen`

定位类

工具类	CSS 属性
`inset-bs-0`	`inset-block-start: 0`
`inset-be-0`	`inset-block-end: 0`
`inset-s-0`	`inset-inline-start: 0`
`inset-e-0`	`inset-inline-end: 0`

什么时候该用

适合用逻辑属性的场景：

国际化产品：你的应用需要同时支持 LTR 和 RTL 语言
组件库/设计系统：面向不同市场分发的 UI 组件
垂直书写：日文竖排邮件、中文古典排版

不需要的场景：

如果你的项目只面向 LTR 水平书写（比如一个中文博客），pt-4 比 pbs-4 更直观、更短，也更容易被团队理解。逻辑属性在这个场景下只增加认知负担。

代码示例：国际化卡片组件

tsx

// 一套代码同时适配 LTR 和 RTL
function Card({ children }: { children: React.ReactNode }) {
  return (
    <div className="pbs-6 pbe-4 border-bs-2 border-bs-blue-500 ps-6 pe-6">
      {children}
    </div>
  )
}
 
// LTR (英语): padding-top 24px, padding-bottom 16px, border-top 蓝色
// RTL (阿拉伯语): 同上，但 ps/pe 的方向自动翻转
// 垂直书写 (日文竖排): block/inline 方向自动对应

弃用提醒：`start-` / `end-`

v4.2 同时弃用了之前的 start-* 和 end-* 定位工具类（例如 start-0、end-4），改为 inline-s-* 和 inline-e-*。

这是一次命名规范化——让所有逻辑属性工具类都遵循统一的 inline/block + s/e（start/end）命名模式，而不是一部分叫 start、一部分叫 ps，割裂。

如果你的项目中有 start-0、end-4 等用法，升级后会在控制台看到弃用警告。替换方式：

diff

- <div class="start-0 end-4">
+ <div class="inset-s-0 inset-e-4">

三、`font-features-*`：OpenType 排版控制

这是我个人认为 v4.2 最"低调但实用"的特性。

背景

CSS 有一个叫 font-feature-settings 的属性，可以精确控制字体的 OpenType 特性——比如连字（ligatures）、表格数字（tabular numbers）、小型大写字母（small caps）等。

在 v4.2 之前，Tailwind 没有提供对应的工具类，你只能写自定义 CSS：

css

.tabular-nums {
  font-feature-settings: 'tnum';
}

v4.2 新增了 font-features-* 工具类，通过任意值语法直接在 class 中使用。

语法

html

<!-- 单个特性 -->
<p class="font-features-['tnum']">1234567890</p>
 
<!-- 多个特性 -->
<p class="font-features-['kern','liga']">AV To fi fl</p>
 
<!-- CSS 变量 -->
<p class="font-features-(--my-font-features)">...</p>
 
<!-- 响应式 -->
<p class="font-features-['tnum'] md:font-features-['smcp']">...</p>

常用 OpenType 特性速查

特性标签	名称	效果
`kern`	Kerning	字距微调，改善字母间距
`liga`	Standard Ligatures	标准连字（fi → ﬁ）
`tnum`	Tabular Numbers	等宽数字，对齐表格/价格列表
`onum`	Oldstyle Numbers	旧体数字（有升部和降部）
`smcp`	Small Caps	小型大写字母
`ss01`–`ss20`	Stylistic Sets	字体设计师预设的风格变体
`zero`	Slashed Zero	带斜杠的零，区分 0 和 O
`chws`	Contextual Half-Width Spacing	中文全角标点间距压缩
`fwid`	Full Widths	全角字形

实战场景

1）表格/数据面板中的等宽数字

数据密集型界面，数字对齐是基本需求：

html

<table>
  <tbody>
    <tr>
      <td class="font-features-['tnum'] tabular-nums">$1,234.56</td>
      <td class="font-features-['tnum'] tabular-nums">$98,765.43</td>
    </tr>
  </tbody>
</table>

注意：Tailwind v4 已有 tabular-nums 工具类（对应 font-variant-numeric: tabular-nums），两者效果一致但走不同的 CSS 属性。font-features-['tnum'] 的优势在于可以和其他 OpenType 特性组合使用。

2）中文排版优化

如果你的项目使用支持 chws 特性的字体（如 Noto Sans SC），可以在根元素上开启：

html

<body class="font-features-['kern','chws']"></body>

效果：

中文句号、逗号等全角标点后的间距会自动压缩
中英文之间的字距更合理
无需 JavaScript 后处理，纯 CSS 实现

3）代码展示中的 Slashed Zero

编程场景需要区分 0（零）和 O（字母 O）：

html

<code class="font-features-['zero','ss01']"> let port = 8080; // O vs 0 </code>

四、`@tailwindcss/webpack`：Webpack 官方集成

为什么现在才做

Tailwind v4.0 发布时只提供了三种构建集成方式：

Vite 插件（@tailwindcss/vite）——官方推荐
PostCSS 插件（@tailwindcss/postcss）——兼容性最广
CLI——零框架依赖

v4 的高性能引擎基于 Lightning CSS 和 Rust，与 Vite 的适配最自然。但现实中仍有大量项目使用 Webpack——尤其是 Create React App 遗产项目、企业内部工具链、以及一些尚未迁移的 Next.js 旧版本。

v4.2 的 @tailwindcss/webpack 把 Tailwind 的扫描和编译直接嵌入 Webpack 的构建管道，不再需要绕道 PostCSS。

用法

bash

npm install @tailwindcss/webpack

// webpack.config.js
const tailwindcss = require('@tailwindcss/webpack')
 
module.exports = {
  plugins: [tailwindcss()],
}

实际建议

如果你已经在用 Vite 或 PostCSS 方式，没必要迁移
如果你的 Webpack 项目之前一直通过 PostCSS 中转，可以考虑换成直接的 Webpack 插件——理论上构建链路更短
对于 Next.js 项目：Next.js 自带 PostCSS 支持，继续用 @tailwindcss/postcss 是最省事的

五、Bug 修复与性能优化

v4.2 修了不少问题，挑几个有工程影响的说：

1）color-mix 双重 @supports 包装

v4.1 中如果你使用了带 color-mix() 的 Tailwind 工具类（比如 bg-blue-500/50），生成的 CSS 可能会被包裹在双重 @supports (color: color-mix(...)) 规则中。v4.2 修复了这个问题。

如果你的 globals.css 中大量使用 color-mix()（比如用于主题色混合），升级后生成的 CSS 会更干净。

2）Oxide 扫描器性能优化

对大型项目（文件数 > 10000）的扫描速度有明显提升，减少了不必要的文件系统操作。

3）`aspect-*` 支持 0.25 倍数

之前 aspect-* 只支持整数比例（如 aspect-16/9），现在支持 .25 步进的小数比例。

4）Astro v5 兼容性改善

如果你用 Astro 做静态站点，v4.2 修复了 import alias 相关的兼容问题。

5）`.jj` 目录默认忽略

Jujutsu（一种新的版本控制工具）的工作目录现在被自动排除在文件扫描之外。

六、升级指南

如果你已经在 v4.x

升级基本是零成本的：

bash

# npm
npm update tailwindcss @tailwindcss/postcss
 
# bun
bun update tailwindcss @tailwindcss/postcss
 
# pnpm
pnpm update tailwindcss @tailwindcss/postcss

package.json 中 "^4" 的范围声明已经覆盖 v4.2，只需更新锁文件。

需要检查的唯一 breaking change：如果你的代码中使用了 start-* 或 end-* 工具类（例如 start-0、end-4 用于定位），需要替换为 inset-s-* / inset-e-*。可以用以下命令快速排查：

bash

# 搜索可能需要替换的用法
grep -rn 'start-[0-9]' --include='*.tsx' --include='*.jsx' --include='*.html' .
grep -rn 'end-[0-9]' --include='*.tsx' --include='*.jsx' --include='*.html' .

items-start、justify-start、text-start 等不在弃用范围内，不用改。

如果你还在 v3

v4.2 不改变从 v3 到 v4 的迁移路径。官方仍然推荐使用自动迁移工具：

bash

npx @tailwindcss/upgrade

七、总结：哪些特性值得立刻用

特性	建议	原因
升级到 v4.2	立刻	零成本，被动享受 bug 修复和性能优化
`font-features-*`	推荐	尤其是中文项目，`kern` + `chws` 能显著改善排版
新色板	按需	新项目或多主题产品考虑使用，已有色彩系统的不急
逻辑属性	按需	需要国际化 / RTL 支持的项目用，纯 LTR 项目意义不大
`@tailwindcss/webpack`	特定场景	仅 Webpack 项目需要，Vite / PostCSS 用户不涉及

总的来说，v4.2 是一个"补完"性质的版本——它没有 v4.0 那种革命性的架构变动，也没有 v4.1 那种视觉冲击力强的新工具（text-shadow、mask），但它补齐了 CSS 规范层面的重要缺口（逻辑属性、font-feature-settings），让 Tailwind 的工具类覆盖面更完整。

如果你已经在用 v4.x，升级是个"运行一行命令就结束"的事。如果你在做国际化产品或中文排版敏感的项目，font-features-* 和逻辑属性会是值得关注的重点。

先给一个全景概览：

类别	新特性	一句话说明
色彩	mauve / olive / mist / taupe 四组色板	扩充中性色选择，跳出 gray 的"万年灰"
布局	完整的 CSS 逻辑属性工具类	支持国际化和垂直书写方向的间距、边框、尺寸
排版	`font-features-*` 工具类	控制 OpenType 字体特性，提升中英混排等排版品质
工程	`@tailwindcss/webpack` 插件	给仍在用 Webpack 的项目一条官方集成路径
弃用	`start-` / `end-` → `inline-s-` / `inline-e-`	统一逻辑属性命名体系
修复	color-mix 双重 @supports 包装等多项 bug	升级即受益，无需手动操作

下面逐项展开。

一、四组新色板：mauve / olive / mist / taupe

解决什么问题

v4.2 补上了四组：

色板	色彩倾向	适合的设计调性
mauve	偏紫/粉的灰	柔和、文艺、女性化设计
olive	偏绿/黄的灰	自然、户外、环保主题
mist	偏蓝的冷灰	科技感、专业工具、仪表盘
taupe	偏棕/米的暖灰	温馨、复古、内容型网站

每组色板包含完整的 11 级色阶（50–950），使用 OKLCH 色彩空间定义（与 v4.0 的 P3 色板体系一致）。

怎么用

和已有色板用法完全一致：

html

<!-- 背景 -->
<div class="bg-mauve-100 dark:bg-mauve-900">
  <!-- 文字 -->
  <p class="text-olive-700 dark:text-olive-300">
    <!-- 边框 -->
  </p>
 
  <div class="border border-mist-300">
    <!-- 渐变 -->
    <div class="bg-gradient-to-r from-taupe-200 to-taupe-50"></div>
  </div>
</div>

实际建议

快速原型：不想花时间调色时，拿 mauve 或 mist 替代 gray 能快速拉开风格差异
多主题系统：需要多套"中性色基调"的产品（比如 SaaS 允许用户选主题）
设计系统扩展：在 @theme 中把 mauve 映射为 --color-neutral，让整套 UI 带上微妙的色彩倾向

二、CSS 逻辑属性工具类（完整版）

这是 v4.2 变动面最大的特性。

什么是逻辑属性

传统 CSS 的 top、bottom、left、right 以及对应的 margin-top、padding-left 等，都是基于物理方向的。但 Web 支持不同的书写模式：

水平 LTR（中文、英语）：left = 行首，top = 块首
水平 RTL（阿拉伯语、希伯来语）：right = 行首
垂直书写（传统中文竖排、日文竖排）：top = 行首，right = 块首

CSS 逻辑属性用 block（块轴方向）和 inline（行内方向）替代物理方向，使同一套样式能自动适配不同书写模式。

v4.2 新增的工具类

间距类

工具类	CSS 属性	在水平 LTR 中等同于
`pbs-4`	`padding-block-start`	`pt-4`
`pbe-4`	`padding-block-end`	`pb-4`
`mbs-4`	`margin-block-start`	`mt-4`
`mbe-4`	`margin-block-end`	`mb-4`
`scroll-pbs-4`	`scroll-padding-block-start`	`scroll-pt-4`
`scroll-pbe-4`	`scroll-padding-block-end`	`scroll-pb-4`
`scroll-mbs-4`	`scroll-margin-block-start`	`scroll-mt-4`
`scroll-mbe-4`	`scroll-margin-block-end`	`scroll-mb-4`

边框类

工具类	CSS 属性
`border-bs`	`border-block-start-width`
`border-be`	`border-block-end-width`
`border-bs-2`	`border-block-start-width: 2px`
`border-bs-blue-500`	`border-block-start-color: blue-500`

尺寸类

工具类	CSS 属性	在水平 LTR 中等同于
`inline-64`	`inline-size`	`w-64`
`min-inline-0`	`min-inline-size`	`min-w-0`
`max-inline-lg`	`max-inline-size`	`max-w-lg`
`block-64`	`block-size`	`h-64`
`min-block-0`	`min-block-size`	`min-h-0`
`max-block-screen`	`max-block-size`	`max-h-screen`

定位类

工具类	CSS 属性
`inset-bs-0`	`inset-block-start: 0`
`inset-be-0`	`inset-block-end: 0`
`inset-s-0`	`inset-inline-start: 0`
`inset-e-0`	`inset-inline-end: 0`

什么时候该用

适合用逻辑属性的场景：

国际化产品：你的应用需要同时支持 LTR 和 RTL 语言
组件库/设计系统：面向不同市场分发的 UI 组件
垂直书写：日文竖排邮件、中文古典排版

不需要的场景：

代码示例：国际化卡片组件

tsx

// 一套代码同时适配 LTR 和 RTL
function Card({ children }: { children: React.ReactNode }) {
  return (
    <div className="pbs-6 pbe-4 border-bs-2 border-bs-blue-500 ps-6 pe-6">
      {children}
    </div>
  )
}
 
// LTR (英语): padding-top 24px, padding-bottom 16px, border-top 蓝色
// RTL (阿拉伯语): 同上，但 ps/pe 的方向自动翻转
// 垂直书写 (日文竖排): block/inline 方向自动对应

弃用提醒：`start-` / `end-`

v4.2 同时弃用了之前的 start-* 和 end-* 定位工具类（例如 start-0、end-4），改为 inline-s-* 和 inline-e-*。

这是一次命名规范化——让所有逻辑属性工具类都遵循统一的 inline/block + s/e（start/end）命名模式，而不是一部分叫 start、一部分叫 ps，割裂。

如果你的项目中有 start-0、end-4 等用法，升级后会在控制台看到弃用警告。替换方式：

diff

- <div class="start-0 end-4">
+ <div class="inset-s-0 inset-e-4">

三、`font-features-*`：OpenType 排版控制

这是我个人认为 v4.2 最"低调但实用"的特性。

背景

在 v4.2 之前，Tailwind 没有提供对应的工具类，你只能写自定义 CSS：

css

.tabular-nums {
  font-feature-settings: 'tnum';
}

v4.2 新增了 font-features-* 工具类，通过任意值语法直接在 class 中使用。

语法

html

<!-- 单个特性 -->
<p class="font-features-['tnum']">1234567890</p>
 
<!-- 多个特性 -->
<p class="font-features-['kern','liga']">AV To fi fl</p>
 
<!-- CSS 变量 -->
<p class="font-features-(--my-font-features)">...</p>
 
<!-- 响应式 -->
<p class="font-features-['tnum'] md:font-features-['smcp']">...</p>

常用 OpenType 特性速查

特性标签	名称	效果
`kern`	Kerning	字距微调，改善字母间距
`liga`	Standard Ligatures	标准连字（fi → ﬁ）
`tnum`	Tabular Numbers	等宽数字，对齐表格/价格列表
`onum`	Oldstyle Numbers	旧体数字（有升部和降部）
`smcp`	Small Caps	小型大写字母
`ss01`–`ss20`	Stylistic Sets	字体设计师预设的风格变体
`zero`	Slashed Zero	带斜杠的零，区分 0 和 O
`chws`	Contextual Half-Width Spacing	中文全角标点间距压缩
`fwid`	Full Widths	全角字形

实战场景

1）表格/数据面板中的等宽数字

数据密集型界面，数字对齐是基本需求：

html

<table>
  <tbody>
    <tr>
      <td class="font-features-['tnum'] tabular-nums">$1,234.56</td>
      <td class="font-features-['tnum'] tabular-nums">$98,765.43</td>
    </tr>
  </tbody>
</table>

注意：Tailwind v4 已有 tabular-nums 工具类（对应 font-variant-numeric: tabular-nums），两者效果一致但走不同的 CSS 属性。font-features-['tnum'] 的优势在于可以和其他 OpenType 特性组合使用。

2）中文排版优化

如果你的项目使用支持 chws 特性的字体（如 Noto Sans SC），可以在根元素上开启：

html

<body class="font-features-['kern','chws']"></body>

效果：

中文句号、逗号等全角标点后的间距会自动压缩
中英文之间的字距更合理
无需 JavaScript 后处理，纯 CSS 实现

3）代码展示中的 Slashed Zero

编程场景需要区分 0（零）和 O（字母 O）：

html

<code class="font-features-['zero','ss01']"> let port = 8080; // O vs 0 </code>

四、`@tailwindcss/webpack`：Webpack 官方集成

为什么现在才做

Tailwind v4.0 发布时只提供了三种构建集成方式：

Vite 插件（@tailwindcss/vite）——官方推荐
PostCSS 插件（@tailwindcss/postcss）——兼容性最广
CLI——零框架依赖

v4.2 的 @tailwindcss/webpack 把 Tailwind 的扫描和编译直接嵌入 Webpack 的构建管道，不再需要绕道 PostCSS。

用法

bash

npm install @tailwindcss/webpack

// webpack.config.js
const tailwindcss = require('@tailwindcss/webpack')
 
module.exports = {
  plugins: [tailwindcss()],
}

实际建议

如果你已经在用 Vite 或 PostCSS 方式，没必要迁移
如果你的 Webpack 项目之前一直通过 PostCSS 中转，可以考虑换成直接的 Webpack 插件——理论上构建链路更短
对于 Next.js 项目：Next.js 自带 PostCSS 支持，继续用 @tailwindcss/postcss 是最省事的

五、Bug 修复与性能优化

v4.2 修了不少问题，挑几个有工程影响的说：

1）color-mix 双重 @supports 包装

如果你的 globals.css 中大量使用 color-mix()（比如用于主题色混合），升级后生成的 CSS 会更干净。

2）Oxide 扫描器性能优化

对大型项目（文件数 > 10000）的扫描速度有明显提升，减少了不必要的文件系统操作。

3）`aspect-*` 支持 0.25 倍数

之前 aspect-* 只支持整数比例（如 aspect-16/9），现在支持 .25 步进的小数比例。

4）Astro v5 兼容性改善

如果你用 Astro 做静态站点，v4.2 修复了 import alias 相关的兼容问题。

5）`.jj` 目录默认忽略

Jujutsu（一种新的版本控制工具）的工作目录现在被自动排除在文件扫描之外。

六、升级指南

如果你已经在 v4.x

升级基本是零成本的：

bash

# npm
npm update tailwindcss @tailwindcss/postcss
 
# bun
bun update tailwindcss @tailwindcss/postcss
 
# pnpm
pnpm update tailwindcss @tailwindcss/postcss

package.json 中 "^4" 的范围声明已经覆盖 v4.2，只需更新锁文件。

bash

# 搜索可能需要替换的用法
grep -rn 'start-[0-9]' --include='*.tsx' --include='*.jsx' --include='*.html' .
grep -rn 'end-[0-9]' --include='*.tsx' --include='*.jsx' --include='*.html' .

items-start、justify-start、text-start 等不在弃用范围内，不用改。

如果你还在 v3

v4.2 不改变从 v3 到 v4 的迁移路径。官方仍然推荐使用自动迁移工具：

bash

npx @tailwindcss/upgrade

七、总结：哪些特性值得立刻用

特性	建议	原因
升级到 v4.2	立刻	零成本，被动享受 bug 修复和性能优化
`font-features-*`	推荐	尤其是中文项目，`kern` + `chws` 能显著改善排版
新色板	按需	新项目或多主题产品考虑使用，已有色彩系统的不急
逻辑属性	按需	需要国际化 / RTL 支持的项目用，纯 LTR 项目意义不大
`@tailwindcss/webpack`	特定场景	仅 Webpack 项目需要，Vite / PostCSS 用户不涉及

一、四组新色板：mauve / olive / mist / taupe

解决什么问题

怎么用

实际建议

二、CSS 逻辑属性工具类（完整版）

什么是逻辑属性

v4.2 新增的工具类

间距类

边框类

尺寸类

定位类

什么时候该用

代码示例：国际化卡片组件

弃用提醒：start-* / end-*

三、font-features-*：OpenType 排版控制

背景

语法

常用 OpenType 特性速查

实战场景

1）表格/数据面板中的等宽数字

2）中文排版优化

3）代码展示中的 Slashed Zero

四、@tailwindcss/webpack：Webpack 官方集成

为什么现在才做

用法

实际建议

五、Bug 修复与性能优化

1）color-mix 双重 @supports 包装

2）Oxide 扫描器性能优化

3）aspect-* 支持 0.25 倍数

4）Astro v5 兼容性改善

5）.jj 目录默认忽略

六、升级指南

如果你已经在 v4.x

如果你还在 v3

七、总结：哪些特性值得立刻用

一、四组新色板：mauve / olive / mist / taupe

解决什么问题

怎么用

实际建议

二、CSS 逻辑属性工具类（完整版）

什么是逻辑属性

v4.2 新增的工具类

间距类

边框类

尺寸类

定位类

什么时候该用

代码示例：国际化卡片组件

弃用提醒：start-* / end-*

三、font-features-*：OpenType 排版控制

背景

语法

常用 OpenType 特性速查

实战场景

1）表格/数据面板中的等宽数字

2）中文排版优化

3）代码展示中的 Slashed Zero

四、@tailwindcss/webpack：Webpack 官方集成

为什么现在才做

用法

实际建议

五、Bug 修复与性能优化

1）color-mix 双重 @supports 包装

2）Oxide 扫描器性能优化

3）aspect-* 支持 0.25 倍数

4）Astro v5 兼容性改善

5）.jj 目录默认忽略

六、升级指南

如果你已经在 v4.x

如果你还在 v3

七、总结：哪些特性值得立刻用

弃用提醒：`start-` / `end-`

三、`font-features-*`：OpenType 排版控制

四、`@tailwindcss/webpack`：Webpack 官方集成

3）`aspect-*` 支持 0.25 倍数

5）`.jj` 目录默认忽略

弃用提醒：`start-` / `end-`

三、`font-features-*`：OpenType 排版控制

四、`@tailwindcss/webpack`：Webpack 官方集成

3）`aspect-*` 支持 0.25 倍数

5）`.jj` 目录默认忽略