{"enrichment":{"faq":[{"a":"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.","q":"How do I configure Tailwind CSS for Hebrew RTL projects?"},{"a":"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.","q":"What are tailwind logical properties ms me ps pe and how do I use them?"},{"a":"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.","q":"How do I convert LTR Tailwind components to RTL-compatible Hebrew versions?"},{"a":"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\u20131.8) tuned for Hebrew text rendering, ensuring readability and proper spacing in both desktop and mobile layouts.","q":"What Hebrew fonts does the preset include and how are they loaded?"},{"a":"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.","q":"How do I set up hebrew-tailwind-preset for Vite and PostCSS?"},{"a":"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.","q":"Can I use dir variants and RTL-first layouts with hebrew-tailwind-preset?"}],"shadow_tags":["rtl-first-design","logical-properties","hebrew-typography","directional-utilities","font-stack-preset","css-variables-theme","dir-variants","bidirectional-layout","hebrew-language-support"],"summary_rewrite":"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."},"files":[{"bytes":16741,"path":"hebrew-tailwind-preset/SKILL.md","sha256":"6c8f19836cfb70e801291faa0b5b30bc6443c73396452eaffa60fb58c82e81a3","url":"https://skillfed.io/files/skills-il/localization/hebrew-tailwind-preset/eb0207f5/SKILL.md"}],"id":"skills-il/localization/hebrew-tailwind-preset","links":{"html":"https://skillfed.io/skills-il/localization/hebrew-tailwind-preset","md":"https://skillfed.io/skills-il/localization/hebrew-tailwind-preset.md","repo":"https://github.com/skills-il/localization"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":8,"language":"Python","last_updated":"2026-07-27","license":"MIT","name":"hebrew-tailwind-preset","publisher":"skills-il","stars":21},"relations":{"similar":[{"id":"skills-il/localization/hebrew-rtl-best-practices"},{"id":"skills-il/localization/israeli-ui-design-system"},{"id":"skills-il/localization/hebrew-i18n"},{"id":"skills-il/localization/hebrew-document-generator"},{"id":"aviz85/claude-skills-library/html-to-pptx"},{"id":"aviz85/claude-skills-library/html-to-pdf"},{"id":"skills-il/localization/israeli-accessibility-compliance"},{"id":"Community-Access/accessibility-agents/i18n-accessibility"},{"id":"AsyrafHussin/agent-skills/tailwind-best-practices"},{"id":"rekryt/skill-tailwind/skill-tailwind"}]},"slug":{"owner":"skills-il","repo":"localization","skill":"hebrew-tailwind-preset"},"version":"eb0207f5"}