hebrew-tailwind-preset

Hebrew Tailwind Preset

Tailwind CSS v4 を推奨します（現行リリースは v4.3、2026 年 5 月）。v3.3 以降でも動作します。論理ユーティリティが導入され、rtl:／ltr: バリアントが v3.3.0 で安定版になりました。React、Vue、Angular、Next.js、Nuxt で動作します。ネットワーク接続は不要です。

手順

Step 1: RTL 用に Tailwind v4 をインストールして設定する

設定の詳細については、references/rtl-config.md を参照してください。

まず Tailwind v4 のビルドプラグインをインストールします。 Tailwind v4 はビルドプラグイン（Vite、PostCSS、webpack）を通じて動作し、CSS で設定します。tailwind.config.js は自動的に読み込まれなくなりました。使用するツールチェーンに合ったプラグインを選んでください。

# Vite (recommended): install the first-party Vite plugin
npm install tailwindcss @tailwindcss/vite

// vite.config.js -- add the plugin
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss()],
});

# PostCSS-based toolchains (Next.js, Webpack, etc.)
npm install tailwindcss @tailwindcss/postcss postcss

// postcss.config.mjs
export default {
  plugins: { '@tailwindcss/postcss': {} },
};

v4 では、@tailwindcss/postcss プラグインが @import のインライン化とベンダープレフィックスの付与を処理するため、postcss-import と autoprefixer は不要になりました。PostCSS を使わない通常の webpack ビルドでは、v4.2 でローダーが追加されました。npm install @tailwindcss/webpack を実行し、.css ルールの use 配列で 'css-loader' の後に '@tailwindcss/webpack' を指定します。

続いて、ヘブライ語フォントの読み込み中に文字が見えなくなるのを防ぐため、font-display: swap を指定してヘブライ語フォントを読み込みます（Google Fonts の <link> または @font-face ルールを使用）。読み込み用のスニペットは、以下の設定ブロックの後にあります。

Tailwind v4（CSS ファーストの設定）：

/* app.css -- imported by your build entry */
@import "tailwindcss";

@theme {
  /* Hebrew font stacks */
  --font-sans: 'Heebo', 'Assistant', 'Noto Sans Hebrew', sans-serif; /* default font for html, body and form controls */
  --font-hebrew: 'Heebo', 'Assistant', 'Noto Sans Hebrew', sans-serif;
  --font-hebrew-serif: 'Frank Ruhl Libre', 'David Libre', serif;
  --font-mono: 'Cousine', 'Fira Code', monospace; /* Cousine carries Hebrew glyphs for code comments; Fira Code does not */

  /* Hebrew-optimized type scale */
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Hebrew line heights (taller than Latin defaults).
     The --leading-* namespace generates leading-<name> utilities,
     so these names are what make leading-hebrew, leading-hebrew-tight
     and leading-hebrew-relaxed exist. Naming them --leading-tight /
     --leading-normal / --leading-relaxed instead would only override
     the built-in scale and leave every leading-hebrew* class empty. */
  --leading-hebrew: 1.7;
  --leading-hebrew-tight: 1.4;
  --leading-hebrew-relaxed: 1.9;
}

Tailwind v3（JavaScript の設定）：

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        hebrew: ['Heebo', 'Assistant', 'Noto Sans Hebrew', 'sans-serif'],
        'hebrew-serif': ['Frank Ruhl Libre', 'David Libre', 'serif'],
      },
      lineHeight: {
        'hebrew': '1.7',
        'hebrew-tight': '1.4',
        'hebrew-relaxed': '1.9',
      },
    },
  },
  plugins: [],
};

font-display: swap を指定してヘブライ語フォントを読み込みます。 HTML の head に Google Fonts の <link> を追加します。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700&family=Assistant:wght@400;600&family=Cousine&display=swap" rel="stylesheet">

または、同じ CSS ファイル内の @theme ブロックに @font-face ルールを記述してセルフホストします。

@font-face {
  font-family: 'Heebo';
  src: url('/fonts/heebo-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

&display=swap クエリパラメーター（link）と font-display: swap ディスクリプター（@font-face）はどちらも、フォントのブロック期間を極めて短くし、スワップ期間を無限にします。ブラウザーはほぼすぐにフォールバックのテキストを表示し、読み込み中にテキストを隠すのではなく、ヘブライ語フォントが届き次第それに切り替えます。

Next.js：next/font を @theme inline 経由で接続します。 next/font を使ってセルフホストする場合（Next.js では外部リクエストが不要でレイアウトシフトも発生しないため推奨）、フォントは CSS 変数として公開されます。--font-sans をその変数に割り当ててください。Preflight は --font-sans からページのデフォルトフォントを取得し、フォームコントロールも（font: inherit によって）継承するため、各要素に font-hebrew クラスを付けなくても、ヘブライ語フォントがどこでもデフォルトになります。

/* app/globals.css */
@import "tailwindcss";
@theme inline {
  --font-sans: var(--font-heebo); /* --font-heebo comes from next/font */
  --font-hebrew: var(--font-heebo);
}

// app/layout.tsx
import './globals.css';
import { Heebo } from 'next/font/google';
const heebo = Heebo({ subsets: ['hebrew', 'latin'], variable: '--font-heebo' });
// <html lang="he" dir="rtl" className={heebo.variable}> ... </html>

heebo.variable は <body> ではなく <html> に指定してください。Preflight は html にデフォルトフォントを適用するため、下位で定義された変数は inline の有無にかかわらず html に届きません。その結果、ページは気づかないうちに Tailwind のデフォルトの sans フォントスタックにフォールバックします。inline も必要な理由は、別の変数を参照するテーマ変数が、ユーティリティの使用箇所ではなく、テーマ変数が定義された場所（:root）で解決されるためです。inline を指定すると、Tailwind は var(--font-heebo) を font-hebrew などのユーティリティに直接書き込むため、クラスを使用した場所で解決されます。どちらの方法でもビルドは成功するため、両方の間違いを見落としやすくなっています。

ステップ 2：論理プロパティのユーティリティを使う

Tailwind v4 のネイティブな論理ユーティリティと rtl:／ltr: バリアントだけで RTL に対応できるため、以前のコミュニティ製 tailwindcss-rtl プラグインは不要です。物理方向を指定するユーティリティより、論理ユーティリティを常に優先してください。

物理方向（避ける）	論理方向（使う）	RTL での動作
ml-4	ms-4	RTL では右マージン
mr-4	me-4	RTL では左マージン
pl-4	ps-4	RTL では右パディング
pr-4	pe-4	RTL では左パディング
left-0	inset-s-0	RTL では右：0（v4.2 以降。start-0 は非推奨のエイリアス）
right-0	inset-e-0	RTL では左：0（v4.2 以降。end-0 は非推奨のエイリアス）
border-l	border-s	RTL では右ボーダー
border-r	border-e	RTL では左ボーダー
rounded-l-lg	rounded-s-lg	RTL では右側を角丸にする
rounded-r-lg	rounded-e-lg	RTL では左側を角丸にする
text-left	text-start	RTL では右揃え
text-right	text-end	RTL では左揃え
scroll-ml-4	scroll-ms-4	RTL では右スクロールマージン
mt-4 / mb-4	mbs-4 / mbe-4	ブロック軸のマージン（v4.2 以降）
pt-4 / pb-4	pbs-4 / pbe-4	ブロック軸のパディング（v4.2 以降）
border-t / border-b	border-bs / border-be	ブロック軸のボーダー（v4.2 以降）
top-0 / bottom-0	inset-bs-0 / inset-be-0	ブロック軸のインセット（v4.2 以降）
w-40 / h-20	inline-40 / block-20	論理サイズ指定（v4.2 以降。min-inline-*、max-block-* も使用可能）

Tailwind v4.2 のインセット名変更。 v4.2（2026 年 2 月 18 日。v4.3 のブログ記事で再度取り上げられています）では、論理的な位置指定ユーティリティ start-*／end-* は非推奨となり、inset-s-*／inset-e-* が推奨されています（inset-bs-*／inset-be-* と命名を揃えるためです）。以前の名前も引き続き動作しますが、新しいコードでは inset-s-0／inset-e-0 を優先してください。この変更の対象はインセット／位置指定のみです。マージン／パディング／ボーダーのユーティリティ ms-*／me-*／ps-*／pe-*／border-s／border-e に変更はありません。任意の値も論理ユーティリティと組み合わせられます（例：ms-[3px]、inset-s-[10px]）。

content 配列ではなく @source を使う。 Tailwind v4 はテンプレートを自動検出するため、v3 の情報を参照する読者は content: [...] キーを探しても見つかりません。Tailwind がスキャンしないパス（外部 UI パッケージや .gitignore 内のファイルなど）は、スタイルシートを基準としたパスで CSS に登録します：@source "../node_modules/@acmecorp/ui-lib";。共有コンポーネントライブラリにヘブライ語のマークアップがある場合に重要です。

ステップ 3：RTL 固有のスタイルに dir バリアントを使う

バリアントの照合方法。 v4 では、rtl: は :where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) に、ltr: はその反対のセレクターにコンパイルされます。以下の rtl: ユーティリティを使う前に、<html> に dir="rtl" を設定してください。見落としやすい点が 2 つあります。まず、既定の方向は LTR なので、ltr: ユーティリティは dir がまったく指定されていないページでも適用されます。次に、RTL ページ内にあるネストされた dir="auto" の領域が LTR と判定された場合、:dir(ltr) と [dir="rtl"] * の両方に一致するため、両方のバリアントが適用されます。このような領域でヘブライ語と英語が混在するユーザーコンテンツを扱う場合は、rtl:／ltr: のペアではなく、論理ユーティリティ（ms-*、text-start）を使ってください。

v4 のダークモード。 v3 の darkMode 設定キーは廃止されています。v4 では、CSS に @custom-variant dark (&:where(.dark, .dark *)); を指定してクラスベースのダークモードを有効にし、方向と自由に組み合わせます。例：class="dark:bg-gray-900 rtl:bg-linear-to-l"。<html> に dir="rtl" を設定し、同じ要素の .dark を切り替えてください。

方向ごとの上書きが必要な場合：

<html lang="he" dir="rtl">


<a class="inline-flex items-center gap-2">
  <span>הבא</span>
  <span class="rtl:-scale-x-100">&#8594;</span>
</a>




<button class="flex items-center gap-2">
  <svg class="rtl:scale-x-[-1]"></svg>
  <span>חזרה</span>
</button>


<div class="ms-auto">...</div>

ステップ 4：ヘブライ語のタイポグラフィ用ユーティリティ

<body dir="rtl" class="font-hebrew text-base leading-hebrew
                        tracking-normal">

  
  <h1 class="text-3xl font-bold leading-hebrew-tight">
    כותרת ראשית
  </h1>

  
  <p class="text-base leading-hebrew">
    טקסט גוף בעברית.
  </p>

  
  <p class="text-base leading-hebrew">
    פריט מספר <span dir="ltr" class="font-mono">ORD-12345</span> אושר
  </p>
</body>

ステップ 5：Tailwind を使った RTL ファーストのコンポーネントパターン

RTL ファーストのカード：

<div class="rounded-lg border border-gray-200 p-6">
  <div class="flex items-center justify-between mb-4
              border-b border-gray-100 pb-4">
    <h3 class="text-lg font-bold">כותרת הכרטיס</h3>
    <span class="text-sm text-gray-500">פעיל</span>
  </div>
  <p class="text-base leading-hebrew text-gray-700">
    תוכן הכרטיס עם טקסט בעברית.
  </p>
  <div class="mt-4 flex gap-3">
    <button class="bg-blue-600 text-white px-4 py-2 rounded-md">
      אישור
    </button>
    <button class="border border-gray-300 px-4 py-2 rounded-md">
      ביטול
    </button>
  </div>
</div>

RTL ファーストのナビゲーション：

<nav dir="rtl" class="flex items-center justify-between
                       px-6 py-4 bg-white border-b">
  <div class="flex items-center gap-3">
    <img src="/logo.svg" alt="לוגו" class="h-8">
    <span class="font-bold text-xl">שם האתר</span>
  </div>
  <ul class="flex gap-6 text-sm font-medium">
    <li><a href="/" class="text-blue-600">ראשי</a></li>
    <li><a href="/about" class="text-gray-600">אודות</a></li>
    <li><a href="/contact" class="text-gray-600">צור קשר</a></li>
  </ul>
</nav>

RTL ファーストのサイドバーレイアウト：

<div class="grid grid-cols-[280px_1fr] min-h-screen">
  
  <aside class="border-e border-gray-200 pe-6 p-4">
    <nav class="space-y-2">
      <a href="#" class="block ps-4 py-2 rounded-md
                         bg-blue-50 text-blue-700 border-s-4
                         border-blue-600">לוח בקרה</a>
      <a href="#" class="block ps-4 py-2 rounded-md
                         text-gray-600">הגדרות</a>
    </nav>
  </aside>
  
  <main class="p-6">
    <h1 class="text-2xl font-bold mb-6">לוח בקרה</h1>
  </main>
</div>

ステップ 6：ヘブライ語のフォーム用ユーティリティ

<form dir="rtl" class="max-w-lg space-y-6">
  <div>
    <label for="name" class="block text-sm font-medium
                              text-gray-700 mb-2">שם מלא</label>
    <input id="name" type="text"
           class="w-full px-4 py-3 border border-gray-300
                  rounded-md text-base font-hebrew
                  focus:outline-none focus:ring-2
                  focus:ring-blue-500">
  </div>

  <div>
    <label for="phone" class="block text-sm font-medium
                               text-gray-700 mb-2">טלפון</label>
    <input id="phone" type="tel" dir="ltr"
           placeholder="05X-XXXXXXX"
           class="w-full px-4 py-3 border border-gray-300
                  rounded-md text-base
                  focus:outline-none focus:ring-2
                  focus:ring-blue-500">
  </div>

  <div>
    <label for="message" class="block text-sm font-medium
                                 text-gray-700 mb-2">הודעה</label>
    <textarea id="message" rows="4"
              class="w-full px-4 py-3 border border-gray-300
                     rounded-md text-base font-hebrew
                     leading-hebrew
                     focus:outline-none focus:ring-2
                     focus:ring-blue-500"></textarea>
  </div>

  <button type="submit"
          class="w-full bg-blue-600 text-white py-3
                 rounded-md font-medium text-base
                 hover:bg-blue-700 transition-colors">
    שליחה
  </button>
</form>

例

例1：ヘブライ語プロジェクト向けに Tailwind をセットアップする

ユーザーの発言：「ヘブライ語の Web アプリ用に Tailwind を設定して」 結果：Tailwind のテーマにヘブライ語フォントファミリーを追加し、ヘブライ語に最適化した行の高さを設定して、ルート HTML 要素に dir="rtl" を設定します。また、物理方向のユーティリティ（ml-/mr-/pl-/pr-）ではなく、論理方向のユーティリティ（ms-/me-/ps-/pe-）を使う方法を示します。

例2：LTR の Tailwind コンポーネントを RTL に変換する

ユーザーの発言：「この Tailwind コンポーネントをヘブライ語の RTL で動作するようにして」 結果：物理方向のユーティリティクラスをすべて論理方向の同等クラス（ml- から ms-、pl- から ps-、text-left から text-start、border-l から border-s、rounded-l から rounded-s）に置き換え、方向性のあるアイコンには rtl: バリアントを追加して、テキスト要素に font-hebrew クラスを設定します。

例3：Tailwind でヘブライ語のダッシュボードを構築する

ユーザーの発言：「Tailwind でヘブライ語の管理ダッシュボードレイアウトを作成して」 結果：RTL のサイドバー（border-e、pe-6）を備えたグリッドレイアウトを作成し、ヘブライ語フォントと RTL のフローを使ったナビゲーション、論理方向の間隔を使ったカードコンポーネント、適切なヘブライ語のタイポグラフィ（font-hebrew、leading-hebrew）を使ったフォーム要素を構築します。

同梱リソース

リファレンス

• references/rtl-config.md -- Tailwind CSS の RTL 設定に関する完全なリファレンスです。v4 の CSS ファースト設定と v3 の JavaScript 設定の例、物理方向から論理方向へのユーティリティ対応表、dir バリアントの使用パターン、ヘブライ語フォントスタックのプリセット、タイポグラフィトークンの定義、物理方向から論理方向のユーティリティへの移行ガイドを掲載しています。

注意点

• Tailwind CSS v3 以降は RTL バリアント（rtl: プレフィックス）をサポートしていますが、エージェントはこれを使わず、RTL 互換性のために ms-4（margin-start）を使うべきところで mr-4 をハードコードしがちです。
• Tailwind v4 の space-x-* は方向を認識します。margin-inline-start／margin-inline-end にコンパイルされるため、dir="rtl" で自動的に反転し、上書きは不要です。--tw-space-x-reverse: 1 を設定して間隔を誤った側に移動させるため、rtl:space-x-reverse は追加しないでください。space-x-reverse が必要なのは、子要素が逆の DOM 順序（flex-row-reverse）でレンダリングされる場合のみです。その場合は方向にかかわらず、同じ要素に指定します。エージェントが覚えている物理マージンの挙動は Tailwind v3 のものです。折り返された行では space-x-* が正しく機能しないため、フレックスとグリッドには gap-4 のほうが適しています。
• ヘブライ語用のカスタムフォント宣言には、FOIT（不可視テキストのフラッシュ）を防ぐために font-display: swap を含める必要があります。エージェントがこれを省略すると、フォントの読み込み中にヘブライ語のテキストが表示されなくなる場合があります。
• Tailwind の text-left と text-right は物理方向のプロパティです。RTL に対応した配置には text-start と text-end クラスを使用してください。エージェントは物理方向を指定するクラスをデフォルトで使いがちです。
• グラデーションとシャドウの方向は物理方向であり、論理方向ではありません。bg-linear-to-r とオフセット付きシャドウは RTL で反転しません。方向が意味を持つ場合は、rtl:bg-linear-to-l のような rtl: による上書きを追加してください。v4 の bg-linear-* という名前を使ってください。bg-gradient-* もレガシーエイリアスとしてコンパイルされますが、現在はドキュメントで推奨されている表記ではありません。

参考リンク

ソース	URL	確認する内容
Tailwind CSS のテーマに関するドキュメント	https://tailwindcss.com/docs/theme	現在の設定構文、v4 の移行に関する注記
Tailwind の RTL／論理プロパティ	https://tailwindcss.com/docs/hover-focus-and-other-states#rtl-support	rtl: および ltr: バリアント
Google Fonts – Heebo	https://fonts.google.com/specimen/Heebo	ヘブライ語 UI フォント、ウェイト、読み込み用スニペット
Google Fonts – Assistant	https://fonts.google.com/specimen/Assistant	ヘブライ語の本文用フォント
MDN の font-display	https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face/font-display	swap の値と FOIT の軽減策

トラブルシューティング

エラー：「Tailwind の論理ユーティリティが機能しない」

原因：論理プロパティに対応していない古い Tailwind バージョンを使用しています 解決策：論理ユーティリティ（ms-、me-、ps-、pe-、および inset inset-s-／inset-e-。以前は start-／end-）を使用するには、rtl:／ltr: バリアントが安定版になったのと同じリリースである Tailwind v3.3 以降が必要です。v3.0～3.2 では、これらのバリアントはまだ実験的で警告が出ていたため、rtl:mr-4 ltr:ml-4 の組み合わせに頼るのではなく、アップグレードしてください。Tailwind v4 には論理プロパティの完全なサポートが組み込まれており、inset-s-*／inset-e-* の名前は v4.2 で導入されました（以前の start-*／end-* も引き続き解決されます）。

エラー：「font-hebrew クラスを指定してもフォントが適用されない」

原因：Tailwind の設定でヘブライ語フォントファミリーが定義されていません 解決策：Tailwind のテーマの fontFamily.hebrew にヘブライ語フォントスタックを追加してください。フォントの CSS がインポートされていることを確認してください（Google Fonts のリンクまたはローカルの @font-face）。クラス名が設定のキーと一致していることを確認してください。

エラー：「RTL でサイドバーが反対側に表示される」

原因：Grid または Flexbox のレイアウトが dir 属性を反映していません 解決策：CSS Grid と Flexbox は dir="rtl" を自動的に反映します。html 要素に dir="rtl" が設定されていることを確認してください。ボーダーには論理プロパティ（border-r の代わりに border-e）、パディングには（pr- の代わりに pe-）を使用してください。CSS の direction 値は HTML の dir 属性と一致させてください。カスケードと rtl:／ltr: バリアントの同期を保つには、dir 属性で方向を設定することを推奨します。CSS で direction を設定する場合は、dir と一致させてください。