Hebrew Tailwind Preset 是一套用于为希伯来语 RTL（从右到左）应用配置 Tailwind CSS 的技能指南。它推荐使用 Tailwind CSS v4（当前发布版 v4.3，2026 年 5 月），v3.3+ 也可用：逻辑工具类在 v3.3.0 引入，rtl:/ltr: 变体在该版本标记为稳定。它适用于 React、Vue、Angular、Next.js 和 Nuxt，无需网络。
一、用途 该技能用于帮助开发者为希伯来语 RTL 应用正确配置 Tailwind CSS，涵盖字体、排版、逻辑属性、方向变体以及 RTL 优先的组件模式。
二、主要能力
- 安装与配置 Tailwind v4 以支持 RTL：Tailwind v4 通过构建插件（Vite、PostCSS 或 webpack）运行，并在 CSS 中配置，tailwind.config.js 不再自动加载。Vite 推荐安装 tailwindcss 与 @tailwindcss/vite；PostCSS 工具链（Next.js、Webpack 等）安装 tailwindcss、@tailwindcss/postcss、postcss；纯 webpack 构建可安装 @tailwindcss/webpack。v4 的 @tailwindcss/postcss 插件已处理 @import 内联和厂商前缀，因此不再需要 postcss-import 和 autoprefixer。
- 希伯来语字体栈与排版令牌：在 @theme 中定义 --font-sans、--font-hebrew、--font-hebrew-serif、--font-mono（Cousine 含希伯来字形，Fira Code 不含），以及希伯来语优化的字号（--text-xs 至 --text-4xl）和行高（--leading-hebrew: 1.7、--leading-hebrew-tight: 1.4、--leading-hebrew-relaxed: 1.9）。行高命名需使用 --leading-hebrew* 才能生成 leading-hebrew 等工具类。
- 字体加载：通过 Google Fonts <link> 或 @font-face 规则加载希伯来字体，并使用 font-display: swap 避免 FOIT（不可见文本闪烁）。
- Next.js 集成：使用 next/font 自托管（无外部请求、无布局偏移），通过 @theme inline 将 --font-sans 指向 CSS 变量（如 var(--font-heebo)），并将 heebo.variable 放在 <html> 上而非 <body>。
- 逻辑属性工具类：优先使用逻辑工具类而非物理方向类，例如 ml-4→ms-4、mr-4→me-4、pl-4→ps-4、pr-4→pe-4、left-0→inset-s-0、right-0→inset-e-0、border-l→border-s、border-r→border-e、rounded-l-lg→rounded-s-lg、rounded-r-lg→rounded-e-lg、text-left→text-start、text-right→text-end、scroll-ml-4→scroll-ms-4，以及块轴工具类 mt-4/mb-4→mbs-4/mbe-4、pt-4/pb-4→pbs-4/pbe-4、border-t/border-b→border-bs/border-be、top-0/bottom-0→inset-bs-0/inset-be-0、w-40/h-20→inline-40/block-20。v4.2 起 start-/end- 已弃用，推荐 inset-s-/inset-e-。
- 方向变体：rtl: 编译为 :where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)，ltr: 为镜像选择器。需在 <html> 上设置 dir="rtl"。注意 ltr: 在无 dir 的页面上也会生效；嵌套 dir="auto" 解析为 LTR 的岛会同时匹配两个变体，此时应使用逻辑工具类。v4 中暗色模式通过 @custom-variant dark (&:where(.dark, .dark *)); 在 CSS 中启用。
- RTL 优先组件模式：提供卡片、导航、侧边栏布局、表单等示例，使用逻辑间距、方向变体图标镜像（如 rtl:-scale-x-100、rtl:scale-x-[-1]）等。
三、使用方式 按步骤操作：第一步安装并配置 Tailwind v4 以支持 RTL；第二步使用逻辑属性工具类；第三步使用 dir 变体处理 RTL 特定样式；第四步使用希伯来语排版工具类；第五步使用 RTL 优先组件模式；第六步使用希伯来语表单工具类。
四、适用场景 适用于需要为希伯来语 RTL 应用配置 Tailwind CSS 的前端项目，包括 React、Vue、Angular、Next.js 和 Nuxt 应用，尤其是需要正确字体、排版、逻辑属性和方向变体的场景。
五、限制与注意事项 Tailwind v3+ 支持 rtl: 变体，但常被忽略而硬编码 mr-4；space-x-* 在 v4 中已是方向感知的（编译为 margin-inline-start/end），无需添加 rtl:space-x-reverse；希伯来语自定义字体声明必须包含 font-display: swap；text-left/text-right 是物理属性，应使用 text-start/text-end；渐变和阴影方向为物理方向（原文在此处截断）。