{"slug":"skills-il-hebrew-tailwind-preset","name":"hebrew-tailwind-preset","description":"Configure Tailwind CSS v4 for Hebrew RTL applications with dir variants, Hebrew font stacks, and logical property utilities. Use when user asks about Tailwind RTL setup, Hebrew Tailwind config, \"Tailwind ivrit\" (Hebrew Tailwind), RTL utility classes, logical properties in Tailwind, ms-/me- utilities, or Tailwind Hebrew font configuration. Covers Tailwind v4 dir variants, Hebrew font stack presets, logical property utilities (ms-/me-/ps-/pe- instead of ml-/mr-/pl-/pr-), RTL-first component patterns, and Hebrew typography tokens. Do NOT use for general CSS RTL patterns (use hebrew-rtl-best-practices) or full design systems (use israeli-ui-design-system instead).","long_description":"---\nname: hebrew-tailwind-preset\ndescription: Configure Tailwind CSS v4 for Hebrew RTL applications with dir variants, Hebrew font stacks, and logical property utilities. Use when user asks about Tailwind RTL setup, Hebrew Tailwind config, \"Tailwind ivrit\" (Hebrew Tailwind), RTL utility classes, logical properties in Tailwind, ms-/me- utilities, or Tailwind Hebrew font configuration. Covers Tailwind v4 dir variants, Hebrew font stack presets, logical property utilities (ms-/me-/ps-/pe- instead of ml-/mr-/pl-/pr-), RTL-first component patterns, and Hebrew typography tokens. Do NOT use for general CSS RTL patterns (use hebrew-rtl-best-practices) or full design systems (use israeli-ui-design-system instead).\nlicense: MIT\n---\n\n# Hebrew Tailwind Preset\n\nTailwind CSS v4 recommended (current release v4.3, May 2026); v3.1+ is compatible for `dir` variants. Works with React, Vue, Angular, Next.js, and Nuxt. No network required.\n\n## Instructions\n\n### Step 1: Install and Configure Tailwind v4 for RTL\n\nSee `references/rtl-config.md` for complete configuration reference.\n\n**Install the Tailwind v4 build plugin first.** Tailwind v4 dropped the automatic `tailwind.config.js` loading, so `@import \"tailwindcss\"` alone will not build until a build plugin is wired. Pick the one matching your toolchain:\n\n```bash\n# Vite (recommended): install the first-party Vite plugin\nnpm install tailwindcss @tailwindcss/vite\n```\n\n```js\n// vite.config.js -- add the plugin\nimport { defineConfig } from 'vite';\nimport tailwindcss from '@tailwindcss/vite';\n\nexport default defineConfig({\n plugins: [tailwindcss()],\n});\n```\n\n```bash\n# PostCSS-based toolchains (Next.js, Webpack, etc.)\nnpm install tailwindcss @tailwindcss/postcss postcss\n```\n\n```js\n// postcss.config.mjs\nexport default {\n plugins: { '@tailwindcss/postcss': {} },\n};\n```\n\nIn v4 the `@tailwindcss/postcss` plugin handles `@import` inlining and vendor prefixing, so `postcss-import` and `autoprefixer` are no longer needed.\n\nThen load Hebrew fonts with `font-display: swap` (via a Google Fonts `` or an `@font-face` rule) to avoid a Flash of Invisible Text while the Hebrew font file loads. See Step 2 for the snippet.\n\n**Tailwind v4 (CSS-first configuration):**\n```css\n/* app.css -- imported by your build entry */\n@import \"tailwindcss\";\n\n@theme {\n /* Hebrew font stacks */\n --font-hebrew: 'Heebo', 'Assistant', 'Noto Sans Hebrew', sans-serif;\n --font-hebrew-serif: 'Frank Ruhl Libre', 'David Libre', serif;\n --font-mono: 'Fira Code', 'Source Code Pro', monospace;\n\n /* Hebrew-optimized type scale */\n --text-xs: 0.8125rem;\n --text-sm: 0.875rem;\n --text-base: 1rem;\n --text-lg: 1.125rem;\n --text-xl: 1.25rem;\n --text-2xl: 1.5rem;\n --text-3xl: 1.875rem;\n --text-4xl: 2.25rem;\n\n /* Hebrew line heights (taller than Latin defaults) */\n --leading-tight: 1.4;\n --leading-normal: 1.7;\n --leading-relaxed: 1.9;\n}\n```\n\n**Tailwind v3 (JavaScript configuration):**\n```js\n// tailwind.config.js\nmodule.exports = {\n content: ['./src/**/*.{html,js,jsx,tsx}'],\n theme: {\n extend: {\n fontFamily: {\n hebrew: ['Heebo', 'Assistant', 'Noto Sans Hebrew', 'sans-serif'],\n 'hebrew-serif': ['Frank Ruhl Libre', 'David Libre', 'serif'],\n },\n lineHeight: {\n 'hebrew': '1.7',\n 'hebrew-tight': '1.4',\n 'hebrew-relaxed': '1.9',\n },\n },\n },\n plugins: [],\n};\n```\n\n**Load the Hebrew fonts with `font-display: swap`.** Either add a Google Fonts `` in your HTML head:\n\n```html\n\n\n\n```\n\nOr self-host with an `@font-face` rule inside the same CSS file as your `@theme` block:\n\n```css\n@font-face {\n font-family: 'Heebo';\n src: url('/fonts/heebo-variable.woff2') format('woff2');\n font-weight: 400 700;\n font-display: swap;\n}\n```\n\nThe `&display=swap` query param (link) and the `font-display: swap` descriptor (`@font-face`) both make the browser render fallback text immediately instead of hiding text until the Hebrew font loads.\n\n**Next.js: wire `next/font` through `@theme inline`.** When you self-host with `next/font` (recommended for Next.js: no external request, no layout shift), the font is exposed as a CSS variable, and `@theme` cannot reference a runtime variable directly. Use `@theme inline` so the variable resolves at the use site:\n\n```css\n/* app.css */\n@import \"tailwindcss\";\n@theme inline {\n --font-hebrew: var(--font-heebo); /* --font-heebo comes from next/font */\n}\n```\n\n```tsx\n// layout.tsx\nimport { Heebo } from 'next/font/google';\nconst heebo = Heebo({ subsets: ['hebrew', 'latin'], variable: '--font-heebo' });\n// ... \n```\n\nPlain `@theme { --font-hebrew: var(--font-heebo); }` (without `inline`) breaks, because Tailwind tries to resolve the variable at build time when it does not yet exist.\n\n### Step 2: Use Logical Property Utilities\n\nTailwind v4's native logical utilities and `rtl:`/`ltr:` variants cover RTL on their own, so the old community `tailwindcss-rtl` plugin is no longer needed. Always prefer logical utilities over physical directional ones:\n\n| Physical (avoid) | Logical (use) | RTL Behavior |\n|-------------------|--------------|--------------|\n| `ml-4` | `ms-4` | Right margin in RTL |\n| `mr-4` | `me-4` | Left margin in RTL |\n| `pl-4` | `ps-4` | Right padding in RTL |\n| `pr-4` | `pe-4` | Left padding in RTL |\n| `left-0` | `inset-s-0` | Right: 0 in RTL (v4.3+; `start-0` is the deprecated alias) |\n| `right-0` | `inset-e-0` | Left: 0 in RTL (v4.3+; `end-0` is the deprecated alias) |\n| `border-l` | `border-s` | Right border in RTL |\n| `border-r` | `border-e` | Left border in RTL |\n| `rounded-l-lg` | `rounded-s-lg` | Right rounded in RTL |\n| `rounded-r-lg` | `rounded-e-lg` | Left rounded in RTL |\n| `text-left` | `text-start` | Right-aligned in RTL |\n| `text-right` | `text-end` | Left-aligned in RTL |\n| `scroll-ml-4` | `scroll-ms-4` | Right scroll margin in RTL |\n\n**Tailwind v4.3 inset rename.** As of v4.3 (May 2026) the logical *positioning* utilities `start-*`/`end-*` are deprecated in favor of `inset-s-*`/`inset-e-*` (so they line up with `inset-bs-*`/`inset-be-*`). The old names still work, but prefer `inset-s-0`/`inset-e-0` in new code. This rename affects only inset/positioning; the margin/padding/border utilities `ms-*`/`me-*`/`ps-*`/`pe-*`/`border-s`/`border-e` are unchanged. Arbitrary values compose with logical utilities too (e.g. `ms-[3px]`, `inset-s-[10px]`).\n\n### Step 3: Use Dir Variants for RTL-Specific Styles\n\n**Prerequisite:** the `rtl:` and `ltr:` variants (built into Tailwind v4) match on an ancestor's `dir` attribute. They do nothing unless an ancestor element actually carries `dir=\"rtl\"` (or `dir=\"ltr\"`) - normally the `` element. Set `dir=\"rtl\"` on the root before relying on any `rtl:` utility below. Because these variants resolve via the CSS `:dir()` pseudo-class, they also respond correctly to `dir=\"auto\"` on mixed Hebrew/English user content, not only an explicit `dir=\"rtl\"`.\n\n**Dark mode in v4.** The v3 `darkMode` config key is gone. In v4 you opt into class-based dark mode in CSS with `@custom-variant dark (&:where(.dark, .dark *));`, then combine freely with direction, e.g. `class=\"dark:bg-gray-900 rtl:text-right\"`. Set `dir=\"rtl\"` on `` and toggle `.dark` on the same element.\n\nWhen you need direction-specific overrides:\n\n```html\n\n\n\n\n