skills.rest
Nadav011
Nadav011COMMUNITY
Explore all skills by this author →
GitHub

hebrew-tailwind-preset

Configure Tailwind CSS v4 for Hebrew RTL applications with logical utilities and Hebrew font stacks.

Updated Sep 15, 2026
Search Tags:#tailwind css#rtl#hebrew#css configuration#web fonts#right-to-left#logical properties
One-click install
npx skills add https://github.com/Nadav011/nadavai-claude --skill hebrew-tailwind-preset-nadav011
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hebrew-tailwind-preset
Source: https://github.com/Nadav011/nadavai-claude/tree/main/plugins/nadavai/skills/hebrew-tailwind-preset
Command: npx skills add https://github.com/Nadav011/nadavai-claude --skill hebrew-tailwind-preset-nadav011

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, @tailwindcss/vite, @tailwindcss/postcss, and includes references (resource) components.

What problem does it solve? Setting up Tailwind CSS for Hebrew right-to-left applications involves many pitfalls: physical utility classes that break in RTL, missing dir variants, Hebrew fonts that flash invisible text while loading, and v4 configuration changes that break old setups. This Skill provides a complete, verified configuration path. ## Core Features & Use Cases - Tailwind v4 RTL Configuration: Set up CSS-first @theme configuration with Hebrew font stacks (Heebo, Assistant), Hebrew-optimized line heights, and the correct build plugin for Vite or PostCSS toolchains. - Logical Property Migration: Convert physical utilities (ml-, mr-, pl-, pr-, text-left) to logical equivalents (ms-, me-, ps-, pe-, text-start) using a complete mapping table, including the v4.3 inset-s-/inset-e- rename. - RTL Component Patterns: Build RTL-first cards, navigation, sidebars, and forms with dir variants, icon mirroring, and mixed Hebrew/English bidirectional text handling. - Use Case: A developer building a Hebrew admin dashboard in Next.js uses this Skill to wire next/font through @theme inline, set dir="rtl" on the root element, and compose the entire layout with logical utilities that flip correctly. ## Quick Start Ask the AI to configure Tailwind CSS v4 for a Hebrew RTL web app with Hebrew fonts and logical utility classes.

Frequently Asked Questions about hebrew-tailwind-preset

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure Tailwind CSS for Hebrew RTL?▼

Set dir="rtl" on the html element, define Hebrew font stacks (Heebo, Assistant) in the v4 @theme block, and use logical utilities like ms-4 and pe-6 instead of physical ones like ml-4 and pr-6. Tailwind v4 needs a build plugin such as @tailwindcss/vite or @tailwindcss/postcss.

How to convert Tailwind classes from LTR to RTL?▼

Replace physical utilities with logical equivalents: ml- to ms-, mr- to me-, pl- to ps-, pr- to pe-, text-left to text-start, border-l to border-s, and rounded-l- to rounded-s-. For positioning, use inset-s- and inset-e- in Tailwind v4.3+ (start- and end- are deprecated but still work).

Does Tailwind v4 support RTL direction variants?▼

Yes, Tailwind v4 includes built-in rtl: and ltr: variants that match an ancestor's dir attribute via the CSS :dir() pseudo-class, so they also respond to dir="auto" on mixed Hebrew/English content. The old tailwindcss-rtl plugin is no longer needed.

Why is my Hebrew text invisible while the font loads?▼

This is FOIT (Flash of Invisible Text), caused by missing font-display: swap. Add &display=swap to the Google Fonts link or font-display: swap to your @font-face rule so the browser renders fallback text immediately while the Hebrew font downloads.

Why does next/font break with Tailwind v4 @theme?▼

Plain @theme cannot reference a runtime CSS variable like the one next/font exposes. Use @theme inline instead, for example --font-hebrew: var(--font-heebo), so the variable resolves at the use site rather than at build time.

Why does space-x-4 not work correctly in RTL layouts?▼

The space-x-4 utility does not respect RTL direction. Use gap-4 with flex or grid layouts instead, or manually add rtl:space-x-reverse to flip the spacing direction in right-to-left contexts.

Related Skills

Explore More Software Engineering Skills→
ThomashighbaughThomashighbaugh
1

tailwind-v4-configuration

Configure Tailwind v4 projects using CSS-first @theme and build tool integrations.

Community
Intermediate
yado2000-makeryado2000-maker

israeli-ui-design-system

Generate RTL-first UI components with Hebrew typography and gov.il compliance.

Community
Intermediate
meytalp-devmeytalp-dev

hebrew-rtl-best-practices

Implement RTL layouts for Hebrew web and mobile applications.

Community
Intermediate
spencerpaulyspencerpauly
672

converting-css-to-tailwind

Convert plain CSS stylesheets into Tailwind utility classes in markup.

Community
Intermediate