Hebrew Tailwind Preset
Configure Tailwind CSS v4 for Hebrew RTL apps with dir variants, logical utilities, and Hebrew font stacks.
Overview
Hebrew Tailwind Preset is an agent skill for the Build phase that configures Tailwind CSS v4 for Hebrew RTL with dir variants, logical utilities, and Hebrew font stacks.
Install
npx skills add https://github.com/skills-il/localization --skill hebrew-tailwind-presetWhat is this skill?
- Tailwind CSS v4 dir variants for RTL-first styling
- Hebrew font stack presets (Heebo, Assistant, Noto Sans Hebrew)
- Logical property utilities including ms-/me- patterns
- RTL-first component patterns and Hebrew typography tokens
- Explicit boundaries: not general RTL CSS (hebrew-rtl-best-practices) or full design systems (israeli-ui-design-system)
- Covers Tailwind v4 dir variants and three named Hebrew font families in the preset scope
Adoption & trust: 1 installs on skills.sh; 18 GitHub stars; 3/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
What problem does it solve?
You are building a Hebrew app with Tailwind but default LTR utilities and missing dir variants break layout, spacing, and typography.
Who is it for?
Indie SaaS or mobile-web builders standardizing on Tailwind v4 for Israeli Hebrew audiences.
Skip if: Projects needing framework-agnostic RTL CSS only (use hebrew-rtl-best-practices) or a complete Israeli design system (use israeli-ui-design-system).
When should I use this skill?
User asks about Tailwind RTL setup, Hebrew Tailwind config, RTL utility classes, logical properties (ms-/me-), or Hebrew font configuration in Tailwind.
What do I get? / Deliverables
Your agent applies v4-ready RTL Tailwind patterns—dir variants, logical ms/me utilities, Hebrew fonts, and component templates—consistent with skills-il localization guidance.
- Tailwind config and preset guidance for Hebrew RTL
- RTL-first component utility patterns
- Hebrew typography token recommendations
Recommended Skills
Journey fit
How it compares
Tailwind v4 preset and utility recipes, not a generic RTL methodology skill or a backend localization pipeline.
Common Questions / FAQ
Who is hebrew-tailwind-preset for?
Solo builders and small teams using Tailwind CSS v4 who must ship polished Hebrew RTL interfaces without relearning logical properties from scratch.
When should I use hebrew-tailwind-preset?
During the build frontend subphase whenever you configure Tailwind for Hebrew, add dir variants, set Hebrew fonts, or wire ms-/me- utilities for RTL layouts.
Is hebrew-tailwind-preset safe to install?
It is configuration and pattern guidance without inherent shell or network requirements; confirm repository trust via the Security Audits panel on this Prism page before install.
SKILL.md
READMESKILL.md - Hebrew Tailwind Preset
{ "author": "skills-il", "version": "1.0.4", "category": "localization", "tags": { "he": [ "Tailwind", "RTL", "עברית", "CSS", "עיצוב" ], "en": [ "tailwind", "rtl", "hebrew", "css", "design" ] }, "display_name": { "he": "תצורת Tailwind לעברית", "en": "Hebrew Tailwind Preset" }, "display_description": { "he": "הגדרות Tailwind CSS v4 לאפליקציות RTL בעברית: וריאנטי dir, מחסניות גופנים עבריות וכלי שירות לוגיים. השתמשו כשהמשתמש שואל על הגדרת Tailwind RTL, תצורת Tailwind עברי, מחלקות שירות ל-RTL, תכונות לוגיות ב-Tailwind, שימוש ב-ms-/me- או הגדרת גופנים עבריים ב-Tailwind. מכסה וריאנטי dir ב-v4, מחסניות גופנים (Heebo, Assistant, Noto Sans Hebrew), כלי שירות לוגיים, תבניות רכיבים RTL-first וטוקני טיפוגרפיה לעברית. אל תשתמשו בשביל תבניות CSS RTL כלליות (מעבר ל-hebrew-rtl-best-practices) או למערכות עיצוב מלאות (מעבר ל-israeli-ui-design-system).", "en": "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\", 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)." }, "supported_agents": [ "claude-code", "cursor", "github-copilot", "windsurf", "opencode", "codex", "antigravity", "gemini-cli" ] } # Tailwind CSS RTL Configuration Reference ## Tailwind v4 Configuration (CSS-first) ```css @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 */ --leading-tight: 1.4; --leading-normal: 1.7; --leading-relaxed: 1.9; } ``` ## Tailwind v3 Configuration (JavaScript) ```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: [], }; ``` ## Complete Logical-to-Physical Utility Mapping ### Margin | Physical | Logical | Description | |----------|---------|-------------| | `ml-*` | `ms-*` | Margin inline start | | `mr-*` | `me-*` | Margin inline end | | `ml-auto` | `ms-auto` | Auto margin inline start | | `mr-auto` | `me-auto` | Auto margin inline end | ### Padding | Physical | Logical | Description | |----------|---------|-------------| | `pl-*` | `ps-*` | Padding inline start | | `pr-*` | `pe-*` | Padding inline end | ### Positioning | Physical | Logical | Description | |----------|---------|-------------| | `left-*` | `start-*` | Inset inline start | | `right-*` | `end-*` | Inset inline end | ### Border | Physical | Logical | Description | |----------|---------|-------------| | `border-l` | `border-s` | Border inline start | | `border-r` | `border-e` | Border inline end | | `border-l-*` | `border-s-*` | Border width inline start | | `border-r-*` | `border-e-*` | Border width inline end | ### Border Radius | Physical | Logical | Description | |----------|---------|-------------| | `rounded-l-*` | `ro