Tailwind RTL Not Working? 10-Minute Fix Guide

RTL not working - dir="rtl"

TL;DR:
Most RTL issues come from

missing dir="rtl",
not using rtl: variants,
Tailwind v4 PostCSS misconfig,
CDN builds that lack your classes, or
component styles fighting RTL.

Set dir="rtl", add rtl: utilities where needed, confirm @tailwindcss/postcss on v4, and rebuild. Examples below with copy-paste snippets.

Why isn’t RTL applying in Tailwind?

You probably don’t have dir="rtl" on the root and/or you’re not using rtl: variants where needed. In v4, a misconfigured PostCSS plugin also blocks Tailwind from generating classes.

What to check first

Add dir="rtl" on <html> to flip layout direction:

<html lang="ar" dir="rtl">

Use rtl: modifier to override directional utilities:

<div class="pl-4 rtl:pl-0 rtl:pr-4">...</div>

If you’re on Tailwind v4, ensure PostCSS uses @tailwindcss/postcss.

How do I enable RTL in Tailwind quickly?

Set dir="rtl" and apply rtl: modifiers where the default LTR utility needs a mirror.

Copy-paste starter

<html lang="fa" dir="rtl">
  <body class="font-sans">
    <header class="ml-6 rtl:ml-0 rtl:mr-6">...</header>
    <nav class="space-x-4 rtl:space-x-reverse">...</nav>
  </body>
</html>

space-x-reverse flips horizontal spacing automatically in RTL contexts.

Does Tailwind v4 change anything for RTL?

Yes, your build setup. Tailwind v4 moved the PostCSS integration to a separate package. If you keep using tailwindcss directly as a PostCSS plugin, no utilities will generate and RTL appears “broken”.

v4 minimal PostCSS config

// postcss.config.js
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

Then ensure your CSS includes Tailwind:

@import "tailwindcss";

Build again.

How do I debug “RTL not working” step-by-step?

Walk this checklist in order:

HTML direction present? <html dir="rtl"> set on the page (or a container).
Variant applied? Directional utility mirrored with rtl: where needed (mr-4 rtl:mr-0 rtl:ml-4). Customizing Tailwind Background Colors - Create locale-specific color schemes.
Spacing utilities reversed? Use space-x-reverse with space-x-* for navs and lists.
Transforms and origins flipped? For floating labels, carousels, chevrons: adjust with rtl:origin-right, rtl:-scale-x-100, etc.
Tailwind v4 plugin correct? Using @tailwindcss/postcss in PostCSS.
Learn how to rebuild safely when classes don’t appear on Tailwind CSS CDN Setup (v4)
Classes included in the build? If you rely on a CDN or partial scans, ensure the generated CSS contains your rtl: classes.

What if my UI library breaks in RTL?

Libraries can ship LTR-biased styles. Prefer libs with documented RTL or add small overrides.

Flowbite and similar kits document RTL tips.
Community libs like shadcn/ui have active RTL discussions; follow their guidance or add scoped fixes.

What are quick patterns for spacing, icons, and transforms in RTL?

Mirror only where needed. Common patterns:

<!-- Spacing -->
<div class="pl-6 rtl:pl-0 rtl:pr-6">…</div>

<!-- Icon chevron that flips in RTL -->
<svg class="size-4 rtl:-scale-x-100">…</svg>

<!-- Floating labels / transforms -->
<label class="origin-left rtl:origin-right">…</label>

How do I test and ship RTL confidently?

Short answer: Toggle dir live and add RTL stories/tests.

Add a dev toolbar button that toggles document.documentElement.dir = 'rtl' | 'ltr'.
Add RTL snapshots in Storybook or visual tests for navs, breadcrumbs, and forms.
Cross-check against a known-good guide (e.g., Flowbite RTL page) for patterns.

Copy-paste snippets

Navbar with auto-reversed gaps

<nav class="flex space-x-4 rtl:space-x-reverse">
  <a class="hover:underline">Home</a>
  <a class="hover:underline">Docs</a>
  <a class="hover:underline">Pricing</a>
</nav>

Card padding mirrored

<div class="pl-5 rtl:pl-0 rtl:pr-5">...</div>

Chevron that flips direction

<svg class="size-4 rtl:-scale-x-100" viewBox="0 0 24 24" aria-hidden="true">…</svg>

Tailwind Font Size Guide – readable Arabic/Hebrew typography.
Install Tailwind in Laravel – common stack where RTL is needed.
Tailkits UI – 200+ components to drop in, test with dir="rtl".

FAQ

Do I need a special plugin for Tailwind RTL?

Use dir="rtl" and Tailwind’s rtl: variant; add small overrides only for complex components.

My RTL classes don’t appear in the CSS. Why?

Your build didn’t include them. Ensure the scanner sees rtl: classes and, for v4, PostCSS uses @tailwindcss/postcss. Rebuild.

How do I reverse horizontal spacing in RTL?

Use space-x-reverse with your space-x-* utilities.

Icons and animations face the wrong way?

Flip with transforms, e.g., rtl:-scale-x-100, rtl:origin-right.

Does RTL affect logical properties like margin-inline?

Tailwind remains physical by default; use rtl: to mirror or add custom utilities if you rely on logical CSS. (Pattern derived from docs and community examples.)