hebrew-tailwind-preset
Set up Tailwind CSS v4 to support Hebrew right-to-left layouts using built-in dir variants, logical utilities (ms-/me-/ps-/pe-), and Hebrew-optimized font stacks. Covers installation for Vite and PostCSS toolchains, font loading with swap display, and RTL-specific component patterns.
Hebrew Tailwind Preset configures Tailwind CSS v4 for Hebrew RTL applications with logical utilities and font stacks.
AI-generated summary based on this skill's SKILL.md
Install
skills-il/localization/hebrew-tailwind-preset · repository language: Python
git clone https://github.com/skills-il/localization
cp -r localization/hebrew-tailwind-preset ~/.claude/skills/hebrew-tailwind-presetnpx skillfed install skills-il/localization/hebrew-tailwind-presetFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I configure Tailwind CSS for Hebrew RTL projects?
hebrew-tailwind-preset sets up Tailwind CSS v4 to support Hebrew right-to-left layouts using built-in dir variants and logical utilities. Install the preset in your Tailwind config, enable RTL mode via the dir attribute on your HTML root, and use logical property utilities (ms-/me-/ps-/pe-) instead of physical left/right classes. The preset includes Hebrew-optimized font stacks and typography tokens configured for proper line heights and text rendering in Hebrew.
What are tailwind logical properties ms me ps pe and how do I use them?
hebrew-tailwind-preset leverages Tailwind's logical property utilities to build direction-agnostic layouts. ms- (margin-start) and me- (margin-end) replace ml-/mr-, while ps- (padding-start) and pe- (padding-end) replace pl-/pr-. In RTL mode (dir="rtl"), these automatically flip: ms- becomes right margin, me- becomes left margin. This eliminates the need for separate RTL component variants and ensures Hebrew layouts work correctly without duplicating styles.
How do I convert LTR Tailwind components to RTL-compatible Hebrew versions?
hebrew-tailwind-preset provides component patterns that replace physical direction classes with logical equivalents. Replace ml-4 with ms-4, mr-4 with me-4, pl-2 with ps-2, and pr-2 with pe-2. For layouts like sidebars, use flex with dir variants: flex-row-reverse applies automatically in RTL. The preset includes example patterns for forms, dashboards, and navigation that work in both LTR and RTL without code duplication.
What Hebrew fonts does the preset include and how are they loaded?
hebrew-tailwind-preset includes a Hebrew-optimized font stack featuring Heebo, Assistant, and system fallbacks, configured with font-display: swap for optimal performance. Fonts are loaded via @font-face declarations with proper Unicode ranges for Hebrew characters. The typography tokens apply optimized line heights (1.6–1.8) tuned for Hebrew text rendering, ensuring readability and proper spacing in both desktop and mobile layouts.
How do I set up hebrew-tailwind-preset for Vite and PostCSS?
hebrew-tailwind-preset supports both Vite and PostCSS toolchains. Install via npm, add the preset to your tailwind.config.js, and ensure your PostCSS config includes Tailwind. For Vite, the preset works with the standard Tailwind plugin. Enable RTL by setting dir="rtl" on your HTML root element; Tailwind's dir: variants automatically apply RTL-specific utilities. The preset handles font loading and typography configuration automatically.
Can I use dir variants and RTL-first layouts with hebrew-tailwind-preset?
hebrew-tailwind-preset fully supports Tailwind v4's dir: variants for RTL-first development. Use dir:flex-row-reverse, dir:text-right, and dir:inset-e utilities to build layouts that adapt to RTL without conditional rendering. The preset enables RTL-first component patterns where logical properties (ms-/me-/ps-/pe-) form the foundation, with dir: variants handling edge cases. This approach scales efficiently for Hebrew dashboards, sidebars, and complex form layouts.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 6 files
hebrew-tailwind-preset/SKILL.md
hebrew-tailwind-preset/SKILL_HE.md
hebrew-tailwind-preset/evidence.json
hebrew-tailwind-preset/metadata.json
hebrew-tailwind-preset/optimization-log.json
hebrew-tailwind-preset/references/rtl-config.md