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
Decision gist · record as of 2026-07-27
Hebrew Tailwind Preset configures Tailwind CSS v4 for Hebrew RTL applications with logical utilities and font stacks. 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.
Use it when
- hebrew-tailwind-preset leverages Tailwind's logical property utilities to build direction-agnostic layouts.
- hebrew-tailwind-preset provides component patterns that replace physical direction classes with logical equivalents.
Verify before relying
Read SKILL.md below before installing (6 files). Open directory: indexed for reading, not audited.
Install
skills-il/localization/hebrew-tailwind-preset · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Configure Tailwind CSS for Hebrew RTL projects with proper fonts and logical utilities”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill covers Tailwind v4 browser-runtime styling for HyperFrames compositions scaffolded with `hyperframes init --tailwind`. It explains CSS-first theme tokens, utility classes, dynamic class safety, and when to compile to CSS instead of relying on the runtime. Use it to debug missing styles, migrate from v3 syntax, and ensure deterministic frame rendering.
Expert guidance for TailwindCSS v4 configuration in server-rendered environments, covering SSR/SSG styling patterns, critical CSS extraction, and FOUC prevention. Walks through version-specific setup, framework integration, and performance optimization across Vite, Next.js, SvelteKit, and other build tools.
Master Tailwind CSS v4's CSS-first approach to rapid UI development with utility classes, design tokens, and modern CSS features. Learn theme configuration, dark mode implementation, container queries, component patterns, and shadcn/ui integration. Covers v3 migration and troubleshooting for build errors.
Build multilingual Israeli applications with proper Hebrew language support. This skill covers plural forms, locale-aware date and number formatting, RTL-first CSS using logical properties, and bidirectional text algorithms for frameworks like React, Vue, Next.js, and Angular.
Automates the mechanical parts of upgrading from Tailwind v3 to v4, then handles the judgment calls the codemod can't: reconciling dependencies, porting config to CSS-first `@theme`, auditing v4's changed defaults (border, ring, placeholder, cursor, dialog, hover), and verifying the rendered output stays identical. Works across Next.js, Vite, Tailwind CLI, and plain PostCSS setups.
Html To Pptx transforms HTML documents into editable PowerPoint files, with built-in support for right-to-left languages like Hebrew and Arabic. Choose between text mode for native elements or image mode for pixel-perfect complex layouts, with customizable fonts, styling, and slide splitting.
More skills Tailwind Css (unlicensed) · tailwind-best-practices (MIT) · skill-tailwind (MIT) · Tailwind Patterns (unlicensed) · tailwindcss (MIT)