# Hebrew Tailwind Preset

> 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…

- **Type:** Skill
- **Install:** `agentstack add skill-skills-il-localization-hebrew-tailwind-preset`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [skills-il](https://agentstack.voostack.com/s/skills-il)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [skills-il](https://github.com/skills-il)
- **Source:** https://github.com/skills-il/localization/tree/master/hebrew-tailwind-preset

## Install

```sh
agentstack add skill-skills-il-localization-hebrew-tailwind-preset
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Hebrew Tailwind Preset

Tailwind 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.

## Instructions

### Step 1: Install and Configure Tailwind v4 for RTL

See `references/rtl-config.md` for complete configuration reference.

**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:

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

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

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

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

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

In v4 the `@tailwindcss/postcss` plugin handles `@import` inlining and vendor prefixing, so `postcss-import` and `autoprefixer` are no longer needed.

Then 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.

**Tailwind v4 (CSS-first configuration):**
```css
/* app.css -- imported by your build entry */
@import "tailwindcss";

@theme {
  /* Hebrew font stacks */
  --font-hebrew: 'Heebo', 'Assistant', 'Noto Sans Hebrew', sans-serif;
  --font-hebrew-serif: 'Frank Ruhl Libre', 'David Libre', serif;
  --font-mono: 'Fira Code', 'Source Code Pro', monospace;

  /* 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) */
  --leading-tight: 1.4;
  --leading-normal: 1.7;
  --leading-relaxed: 1.9;
}
```

**Tailwind v3 (JavaScript configuration):**
```js
// 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: [],
};
```

**Load the Hebrew fonts with `font-display: swap`.** Either add a Google Fonts `` in your HTML head:

```html

```

Or self-host with an `@font-face` rule inside the same CSS file as your `@theme` block:

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

The `&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.

**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:

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

```tsx
// layout.tsx
import { Heebo } from 'next/font/google';
const heebo = Heebo({ subsets: ['hebrew', 'latin'], variable: '--font-heebo' });
//  ... 
```

Plain `@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.

### Step 2: Use Logical Property Utilities

Tailwind 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:

| Physical (avoid) | Logical (use) | RTL Behavior |
|-------------------|--------------|--------------|
| `ml-4` | `ms-4` | Right margin in RTL |
| `mr-4` | `me-4` | Left margin in RTL |
| `pl-4` | `ps-4` | Right padding in RTL |
| `pr-4` | `pe-4` | Left padding in RTL |
| `left-0` | `inset-s-0` | Right: 0 in RTL (v4.3+; `start-0` is the deprecated alias) |
| `right-0` | `inset-e-0` | Left: 0 in RTL (v4.3+; `end-0` is the deprecated alias) |
| `border-l` | `border-s` | Right border in RTL |
| `border-r` | `border-e` | Left border in RTL |
| `rounded-l-lg` | `rounded-s-lg` | Right rounded in RTL |
| `rounded-r-lg` | `rounded-e-lg` | Left rounded in RTL |
| `text-left` | `text-start` | Right-aligned in RTL |
| `text-right` | `text-end` | Left-aligned in RTL |
| `scroll-ml-4` | `scroll-ms-4` | Right scroll margin in RTL |

**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]`).

### Step 3: Use Dir Variants for RTL-Specific Styles

**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"`.

**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.

When you need direction-specific overrides:

```html

  →
  הבא

  
  חזרה

  

```

### Step 4: Hebrew Typography Utilities

```html

  
  
    כותרת ראשית
  

  
  
    טקסט גוף עם ריווח מותאם לקריאות עברית.
  

  
  
    פריט מספר ORD-12345 אושר
  

```

### Step 5: RTL-First Component Patterns with Tailwind

**RTL-first card:**
```html

  
    כותרת הכרטיס
    פעיל
  
  
    תוכן הכרטיס עם טקסט בעברית.
  
  
    
      אישור
    
    
      ביטול
    
  

```

**RTL-first navigation:**
```html

  
    
    שם האתר
  
  
    ראשי
    אודות
    צור קשר
  

```

**RTL-first sidebar layout:**
```html

  
  
    
      לוח בקרה
      הגדרות
    
  
  
  
    לוח בקרה
  

```

### Step 6: Form Utilities for Hebrew

```html

  
    שם מלא
    
  

  
    טלפון
    
  

  
    הודעה
    
  

  
    שליחה
  

```

## Examples

### Example 1: Set Up Tailwind for Hebrew Project
User says: "Configure Tailwind for my Hebrew web app"
Result: Add Hebrew font families to Tailwind theme, configure Hebrew-optimized line heights, set up `dir="rtl"` on root HTML element, and demonstrate using logical utilities (ms-/me-/ps-/pe-) instead of physical ones (ml-/mr-/pl-/pr-).

### Example 2: Convert LTR Tailwind Component to RTL
User says: "Make this Tailwind component work in Hebrew RTL"
Result: Replace all physical utility classes with logical equivalents (ml- to ms-, pl- to ps-, text-left to text-start, border-l to border-s, rounded-l to rounded-s), add rtl: variants for directional icons, and set font-hebrew class on text elements.

### Example 3: Build Hebrew Dashboard with Tailwind
User says: "Create a Hebrew admin dashboard layout with Tailwind"
Result: Build grid layout with RTL sidebar (border-e, pe-6), navigation with Hebrew font and RTL flow, card components using logical spacing, and form elements with proper Hebrew typography (font-hebrew, leading-hebrew).

## Bundled Resources

### References
- `references/rtl-config.md` -- Complete Tailwind CSS RTL configuration reference: v4 CSS-first and v3 JavaScript config examples, full physical-to-logical utility mapping table, dir variant usage patterns, Hebrew font stack presets, typography token definitions, and migration guide from physical to logical utilities.

## Gotchas
- Tailwind CSS v3+ supports RTL variants (`rtl:` prefix), but agents often do not use them, instead hardcoding `mr-4` when they should use `ms-4` (margin-start) for RTL compatibility.
- The `space-x-4` utility in Tailwind does not respect RTL direction. Agents must use `gap-4` with flex or grid, or manually add `rtl:space-x-reverse` to flip spacing direction.
- Custom font declarations for Hebrew must include `font-display: swap` to prevent FOIT (Flash of Invisible Text). Agents may omit this, causing Hebrew text to disappear during font loading.
- Tailwind's `text-left` and `text-right` are physical properties. Use `text-start` and `text-end` classes for RTL-aware alignment. Agents default to physical direction classes.
- Gradient and shadow direction is physical, not logical: `bg-gradient-to-r` and offset shadows do not flip in RTL. Add a `rtl:` override (e.g. `rtl:bg-gradient-to-l`) when the direction is meaningful.

## Reference Links

| Source | URL | What to Check |
|--------|-----|---------------|
| Tailwind CSS docs | https://tailwindcss.com/docs | Current configuration syntax, v4 migration notes |
| Tailwind RTL / logical properties | https://tailwindcss.com/docs/hover-focus-and-other-states#rtl-support | `rtl:` and `ltr:` variants |
| Google Fonts – Heebo | https://fonts.google.com/specimen/Heebo | Hebrew UI font, weights, loading snippet |
| Google Fonts – Assistant | https://fonts.google.com/specimen/Assistant | Hebrew body font |
| MDN font-display | https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display | `swap` value and FOIT mitigation |

## Troubleshooting

### Error: "Tailwind logical utilities not working"
Cause: Using older Tailwind version without logical property support
Solution: Logical utilities (ms-, me-, ps-, pe-, and inset `inset-s-`/`inset-e-`, formerly `start-`/`end-`) require Tailwind v3.3+. For v3.0-3.2, use rtl:/ltr: variants instead (e.g., `rtl:mr-4 ltr:ml-4`). Tailwind v4 has full logical property support built in; the `inset-s-*`/`inset-e-*` names landed in v4.3 (the older `start-*`/`end-*` still resolve).

### Error: "Font not applying with font-hebrew class"
Cause: Hebrew font family not defined in Tailwind configuration
Solution: Add the Hebrew font stack to your Tailwind theme under fontFamily.hebrew. Ensure the font CSS is imported (Google Fonts link or local @font-face). Verify the class name matches your config key.

### Error: "Sidebar appears on wrong side in RTL"
Cause: Grid or flex layout not respecting dir attribute
Solution: CSS Grid and Flexbox automatically respect `dir="rtl"`. Ensure `dir="rtl"` is set on the `html` element. Use logical properties for borders (border-e instead of border-r) and padding (pe- instead of pr-). Keep the CSS `direction` value consistent with the HTML `dir` attribute - prefer setting direction via the `dir` attribute so the cascade and the `rtl:`/`ltr:` variants stay in sync; if you do set `direction` in CSS, make sure it matches `dir`.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [skills-il](https://github.com/skills-il)
- **Source:** [skills-il/localization](https://github.com/skills-il/localization)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-skills-il-localization-hebrew-tailwind-preset
- Seller: https://agentstack.voostack.com/s/skills-il
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.