Tailwind CSS v4如何支持writing-mode？正确用法咨询

Tailwind CSS v4 提供了直接对应 CSS writing-mode 属性的工具类，你可以通过以下方式正确使用：

可用工具类及对应效果 #

• writing-horizontal-tb：对应 CSS writing-mode: horizontal-tb，文本水平方向排版，从上到下（默认排版方式）
• writing-vertical-rl：对应 CSS writing-mode: vertical-rl，文本垂直方向排版，从右向左
• writing-vertical-lr：对应 CSS writing-mode: vertical-lr，文本垂直方向排版，从左向右
• writing-sideways-rl：对应 CSS writing-mode: sideways-rl，文本垂直方向排列，同时文字向右倾斜
• writing-sideways-lr：对应 CSS writing-mode: sideways-lr，文本垂直方向排列，同时文字向左倾斜

使用示例 #

直接将工具类添加到HTML元素上即可：

<!-- 垂直从右向左排版 -->
<div class="writing-vertical-rl">
  这是垂直从右向左排列的文本
</div>

<!-- 垂直从左向右排版 -->
<p class="writing-vertical-lr">
  这是垂直从左向右排列的文本
</p>

兼容性说明 #

Tailwind CSS v4 核心功能依赖的浏览器版本（Chrome 111+、Safari 16.4+、Firefox 128+）均完全支持 writing-mode 属性，且该属性自2017年3月起已在主流浏览器中普及，无需额外兼容处理。

内容的提问来源于stack exchange，提问作者rozsazoltan