Hebrew Tailwind Preset
Verified92/100Configure 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", 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, 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).
Trust score 92/100 (Verified) · 489+ installs · 2 GitHub contributors · MIT license
Configuring Tailwind CSS for Hebrew applications requires adjustments beyond setting dir=rtl. It involves reversed spacing, breakpoints that behave differently in RTL, Hebrew typography with custom font stacks, and dozens of small details. Without a ready-made preset, every project starts from scratch and falls into the same traps.
skills-ilHow to use this skill
Not sure how? Read the guide- 1. Click "Download ZIP" to download the skill files.
- 2. Open Claude Desktop and go to Customize > Skills.
- 3. Click "+" and select "Upload a skill", then upload the ZIP file.
- 4. Start a new conversation. The skill will activate automatically when relevant.
Developers? Install via command line (CLI)
npx skills-il add skills-il/localization@v1.1.0-hebrew-tailwind-preset --skill hebrew-tailwind-preset -a claude-codeWhen to Apply
- When building a Hebrew RTL website needing Tailwind config with RTL support
- When using Hebrew fonts like Heebo, Assistant, or Noto Sans Hebrew
- When needing RTL variants for padding, margin, and text-align
- When upgrading from Tailwind v3 to v4 and need updated RTL support
Try These Prompts
How do I configure Tailwind CSS to work with Hebrew RTL? Including plugin setup, default direction, and support for both languages.
How do I configure a Hebrew font like Heebo or Assistant in Tailwind? Including font-family and font-face setup inside tailwind.config.
What is the difference between using ms-/me- (logical) versus ml-/mr- in Tailwind when developing a bidirectional app supporting both Hebrew and English?
Frequently Asked Questions
Changelog
Updated to current Tailwind v4 (v4.3 inset rename), next/font @theme inline wiring, v4 dark-mode @custom-variant, and dir=auto interaction notes.
Jun 21, 2026
Added the Tailwind v4 build-plugin install step, a font-loading snippet, and the dir=rtl prerequisite for direction variants.
May 14, 2026
Expanded Hebrew description for EN/HE depth parity, populated 'avoid' guidance, and cleaned best-practices text.
Apr 20, 2026
Related Skills
Author: skills-ilGenerate professional Hebrew documents (PDF, DOCX/Word, and PPTX) with correct right-to-left layout, mixed Hebrew-and-English bidi handling, and proper Hebrew typography. Use whenever the output is a Hebrew or mixed Hebrew/English Word document, Hebrew PDF, or Hebrew PowerPoint, including phrasings like "Hebrew Word document", "Word document in Hebrew", "מסמך Word בעברית", "create a .docx in Hebrew", "lehafik heshbonit", and "litstor hozeh", or Israeli templates such as Heshbonit Mas (tax invoice), Hozeh (contract), Hatza'at Mechir (proposal), or Protokol (meeting minutes). ALSO use this for the symptom where a Hebrew document looks correct on screen or in Claude but comes out scrambled, reversed, or broken after export to Word, with English words, numbers, or punctuation landing on the wrong side, phrased as "Hebrew text reversed in Word", "my Hebrew Word file is broken", "fix Hebrew formatting in Word", or "the docx came out messed up"; the fix is regenerating the .docx with paragraph-level RTL/bidi, NOT a web/CSS RTL change. Prefer this over the generic docx or pdf skills ONLY when the document is Hebrew or right-to-left, because those do not set RTL/bidi and produce scrambled Hebrew with English words and punctuation in the wrong place; for English-only documents use the generic skill. Covers reportlab, WeasyPrint, python-docx, and pptxgenjs. Do NOT use for OCR or reading existing documents (use hebrew-ocr-forms instead).
Author: skills-ilWrite and edit professional content in Hebrew including marketing copy, UX text, articles, emails, and social media posts. Use when user asks to write in Hebrew, "ktov b'ivrit", create Hebrew marketing content, edit Hebrew text, write Hebrew UX copy, or optimize Hebrew content for SEO. Covers grammar rules, register from formal to dugri, mixed Hebrew/English, gendered language, nikud and numerals, and Hebrew SEO best practices. Do NOT use for Hebrew NLP/ML tasks (use hebrew-nlp-toolkit) or translation (use a translation skill).
Author: skills-ilImplement right-to-left (RTL) layouts for Hebrew web applications. Use when user asks about RTL layout, Hebrew text direction, bidirectional (bidi) text, Hebrew CSS, "right to left", or needs to build a Hebrew web UI. Covers CSS logical properties, the :dir() pseudo-class, Tailwind RTL, React/Next.js RTL setup, icon mirroring, Hebrew typography, and font selection. Do NOT use for Arabic RTL (similar but different typography) unless user explicitly asks for shared RTL patterns, or for native mobile RTL (React Native I18nManager, SwiftUI, Android) which is out of scope.
Use at your own risk. Terms of Use · Security
Want to build your own skill? Try the Skill Creator · Submit a Skill