Tailwind CSS v4.2.0 新增了 webpack 插件、四个新的默认调色板、一套完整的用于块方向间距和边框的逻辑属性实用程序，以及直接映射到 CSS 逻辑尺寸属性的新的行内/块尺寸实用程序。
主要亮点包括：
- 新的
@tailwindcss/webpack插件包 - 默认主题新增四种颜色：淡紫色、橄榄绿、雾灰色和灰褐色。
- 块方向内边距、外边距、边框、滚动内边距和滚动外边距实用程序
- 逻辑插入实用程序（
inset-s-*,inset-e-*,inset-bs-*,inset-be-*） - 内联/块大小实用程序（
inline-*,block-*以及最小值/最大值变体） font-features-*实用工具font-feature-settingsstart-*和end-*已弃用，取而代之的是inline-s-*和inline-e-*
什么是新的
Webpack 插件
新的
@tailwindcss/webpack
该软件包将 Tailwind CSS 作为一流的 webpack 插件引入：
// webpack.config.js进口
尾风
从
'@tailwindcss/webpack'
;出口
默认
{插件：[
新的
尾风
（）]，};全新配色方案
默认主题现在包含四种新的配色方案： 淡紫色 , 橄榄 , 薄雾 ， 和 灰褐色 这些功能适用于所有标准颜色工具和缩放级别：
<
div
班级
=
"bg-mauve-100 text-mauve-900"
>淡紫色</
div
><
div
班级
=
"bg-olive-200 边框 border-olive-400"
>橄榄</
div
><
div
班级
=
"bg-mist-50 text-mist-700"
>薄雾</
div
><
div
班级
=
“bg-taupe-300 悬停：bg-taupe-400”
>灰褐色</
div
>
逻辑属性实用程序
此版本新增了一组用于 CSS 逻辑属性的实用工具，这些属性在块级方向上映射到物理顶部/底部，同时遵循书写模式和文本方向：
填充块：
<
div
班级
=
“pbs-4 pbe-8”
>
</
div
>边距块：
<
div
班级
=
"mbs-6 mbe-2"
>
</
div
>边框块：
<
div
班级
=
"border-bs border-be border-gray-300"
>
</
div
>滚动内边距和外边距块：
<
div
班级
=
"scroll-pbs-4 scroll-mbe-2"
>
</
div
>逻辑插入：
这
inset-s-*
,
inset-e-*
,
inset-bs-*
， 和
inset-be-*
实用程序分别涵盖行内起始、行内结束、块起始和块结束的逻辑定位：
<
div
班级
=
"绝对插入 bs-0 插入 be-0 插入 s-4"
>
</
div
>内联/块大小实用程序
新实用程序映射到 CSS
inline-size
和
block-size
属性，它们是逻辑上的等价物
width
和
height
所有标准尺寸比例值，加上
min-*
和
max-*
有多种版本可供选择：
<
div
班级
=
"内联-64 最小内联-0 最大内联-完整"
>...</
div
><
div
班级
=
"block-32 min-block-screen max-block-none"
>...</
div
>
font-features-*
公用事业
新的
font-features-*
实用程序提供访问权限
font-feature-settings
CSS 属性。此属性允许启用或禁用 OpenType 字体功能，例如连字、小型大写字母和等号：
<
页
班级
=
"font-features-['liga','calt']"
>带有连字和上下文替代的文本</
页
>弃用
这
start-*
和
end-*
此版本中已弃用实用程序，取而代之的是……
inline-s-*
和
inline-e-*
新名称与块方向和大小实用程序一同引入的更广泛的逻辑属性命名约定保持一致。升级时请更新用法：
<
div
班级
=
“开始-4 结束-0”
>...</
div
><
div
班级
=
"inline-s-4 inline-e-0"
>...</
div
>
