# Rtl CSS > RTL (Right-to-Left) CSS for Hebrew and Arabic. Use when building UI that needs RTL support, fixing RTL layout issues, or auditing CSS for RTL compliance. - Skill: `majiayu000/rtl-css` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds add majiayu000/rtl-css` - Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/rtl-css/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: majiayu000 (https://skillmd.com/u/majiayu000) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/majiayu000/rtl-css --- # RTL CSS with Logical Properties ## The Golden Rule NEVER use physical properties. ALWAYS use logical properties. ## Property Mapping | Physical (❌) | Logical (✅) | Tailwind | |--------------|-------------|----------| | padding-left | padding-inline-start | ps-* | | padding-right | padding-inline-end | pe-* | | margin-left | margin-inline-start | ms-* | | margin-right | margin-inline-end | me-* | | left | inset-inline-start | start-* | | right | inset-inline-end | end-* | | text-align: left | text-align: start | text-start | | text-align: right | text-align: end | text-end | | border-left | border-inline-start | border-s-* | | border-right | border-inline-end | border-e-* | ## Tailwind Examples ```tsx // ❌ WRONG - Breaks in RTL
// ✅ CORRECT - Works everywhere
``` ## Next.js Layout with RTL ```typescript // app/[locale]/layout.tsx import { isRtlLang } from 'rtl-detect'; export default function LocaleLayout({ children, params: { locale }, }) { const dir = isRtlLang(locale) ? 'rtl' : 'ltr'; return ( {children} ); } ``` ## Icon Flipping ```tsx // Directional icons need flip // Universal icons - don't flip ``` ## Audit Command Run `scripts/audit_rtl.sh` to find violations in your codebase. ## Checklist - [ ] All padding uses ps-/pe- - [ ] All margins uses ms-/me- - [ ] Positioning uses start-/end- - [ ] Text uses text-start/text-end - [ ] Directional icons have rtl:rotate-180 - [ ] Layout has dir attribute