Hebrew Tailwind Preset

Hebrew Tailwind Preset

Tailwind CSS v4.0+ recommended; 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:

# 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': {} },
};

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

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

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

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

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

Step 2: Use Logical Property Utilities

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 | start-0 | Right: 0 in RTL | | right-0 | end-0 | Left: 0 in RTL | | 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 |

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.

When you need direction-specific overrides:

  →
  הבא

  
  חזרה

  

Step 4: Hebrew Typography Utilities

  
  
    כותרת ראשית
  

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

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

Step 5: RTL-First Component Patterns with Tailwind

RTL-first card:

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

RTL-first navigation:

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

RTL-first sidebar layout:

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

Step 6: Form Utilities for Hebrew

  
    שם מלא
    
  

  
    טלפון
    
  

  
    הודעה
    
  

  
    שליחה
  

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.

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

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: squadcodercom
• Source: squadcodercom/squadcoder
• License: MIT
• Homepage: https://squadcoder.com

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