Tailwind CSS 49 🎨 RTL (Right-to-Left) Support using Logical Properties (ms-*, me-*, ps-*, pe-*)
A layout written with margin-left and margin-right is a layout that assumes every reader reads from left to right. For Arabic, Hebrew, Persian, and Urdu speakers, the assumption is wrong. The text flows from right to left, the sidebar that sits on the left in English should sit on the right, and the padding that precedes the text should precede it on the other side. The physical properties — the margin-left, the padding-right, the left, the right — are direction-agnostic in name only; they are direction-specific in effect. Logical properties solve this. The margin-inline-start means “the margin on the side where the text starts,” which is the left in English and the right in Arabic. The ms-*, the me-*, the ps-*, and the pe-* utilities are the Tailwind wrappers for these properties, and they flip automatically when the dir attribute changes .
The mapping is direct. The ms-* is the margin-inline-start, and it replaces the ml-* (the margin-left) in the LTR context. The me-* is the margin-inline-end, and it replaces the mr-*. The ps-* and the pe-* are the padding equivalents. The start-* and the end-* replace the left-* and the right-* for the positioned elements. The text-start and the text-end replace the text-left and the text-right . The logical utilities render the same output in the LTR and the RTL contexts, and the developer writes the class once instead of the ltr:ml-4 rtl:mr-4 pair .
The logical properties are the default in Tailwind v4. The ms-*, the me-*, the ps-*, and the pe-* are part of the core, and the block-axis utilities — the mbs-*, the mbe-*, the pbs-*, and the pbe-* — were added in v4.2 . The start-* and the end-* are deprecated in favor of the inset-s-* and the inset-e-*, which align with the broader logical naming convention . The symmetric utilities — the mx-*, the px-*, the p-*, and the m-* — apply to both sides and work correctly in the RTL without changes . The space-x-* utilities use the logical properties for the horizontal spacing, and the space-x-reverse reverses the order .
This chapter covers three areas. First, why the logical properties exist — the physical-versus-logical problem and the automatic flip. Second, the logical utility mappings — the inline-axis spacing, the inset, the borders, the radius, the text alignment, and the float. Third, the block-axis and the newer utilities — the mbs-*, the pbs-*, the inset-s-*, the inline-*, and the migration from the physical classes. The chapter ends with a complete example session, a quick reference, best practices, common pitfalls, real-world examples, and diagrams showing the logical-to-physical resolution.
Key point: Logical property utilities use the writing direction to resolve the physical side. The ms-* is the margin-inline-start, and it is the left in the LTR and the right in the RTL. The me-*, the ps-*, and the pe-* are the counterparts. The start-* and the end-* replace the left-* and the right-*. The text-start and the text-end replace the text-left and the text-right. The logical utilities are the core in v4, and the block-axis utilities were added in v4.2.
Why the logical properties exist
The physical-property problem. The margin-left always refers to the left side of the element, regardless of the text direction. In the RTL context, the developer must override it with the margin-right and reset the margin-left. The result is the duplicated styles and the ltr: and rtl: variants for every directional class . The physical properties are the source of the RTL bugs, and the logical properties eliminate the duplication.
The automatic-flip problem. The logical property adapts to the direction. The margin-inline-start is the left in the LTR and the right in the RTL. The padding-inline-end is the right in the LTR and the left in the RTL. The browser resolves the physical side from the dir attribute, and the developer writes one class. The automatic flip is the point, and it is what makes the logical utilities the foundation of the internationalized layouts .
The dir-attribute problem. The logical properties depend on the dir attribute. The <html dir="rtl"> sets the direction for the whole document, and the browser flips every logical property. The dir can also be set on a subtree, and the properties inside the subtree flip according to the nearest ancestor with the dir. The setup is the one attribute, and the rest is automatic .
The icon-flip problem. The icons are not the text, and the logical properties do not flip them. A chevron that points right in the LTR should point left in the RTL. The rtl:scale-x-[-1] is the variant that flips the icon horizontally, and the rtl: variant is the tool for the direction-specific styles .
The symmetric-utility problem. The symmetric utilities — the mx-*, the px-*, the p-*, and the m-* — apply to both sides, and they work correctly in the RTL without changes. The mx-4 is the margin-inline: 1rem, which is the same on both sides. The symmetric utilities are the safe default, and the logical utilities are for the asymmetric cases .
The trade-off. The logical properties require the browser support. The modern browsers support the CSS logical properties and values, and the Tailwind v4 targets them. The older browsers — the Internet Explorer and the older Safari — do not support them, and the fallback is the physical properties. The trade-off is between the internationalized layout and the legacy browser support, and the modern projects choose the internationalization.
a. The inline-axis logical utilities
The inline-axis utilities are the spacing and the positioning along the text direction. They are the core of the RTL support.
The margin. The ms-* and the me-* are the margin-inline-start and the margin-inline-end. The ms-4 is the margin-left: 1rem in the LTR and the margin-right: 1rem in the RTL.
<div class="ms-4 me-8">
<!-- LTR: margin-left: 1rem; margin-right: 2rem -->
<!-- RTL: margin-right: 1rem; margin-left: 2rem -->
</div>The mx-* is the symmetric margin-inline, and it applies to both sides .
The padding. The ps-* and the pe-* are the padding-inline-start and the padding-inline-end. The ps-2 is the padding-left: 0.5rem in the LTR and the padding-right: 0.5rem in the RTL.
<div class="ps-2 pe-6">
<!-- LTR: padding-left: 0.5rem; padding-right: 1.5rem -->
<!-- RTL: padding-right: 0.5rem; padding-left: 1.5rem -->
</div>The px-* is the symmetric padding-inline .
The inset. The start-* and the end-* are the inset-inline-start and the inset-inline-end. The start-0 positions the element at the start edge — the left in the LTR and the right in the RTL. The end-0 positions it at the end edge .
<div class="absolute start-0 end-0">
<!-- LTR: left: 0; right: 0 -->
<!-- RTL: right: 0; left: 0 -->
</div>The inset-s-* and the inset-e-* are the newer names, and the start-* and the end-* are deprecated in v4.2 .
The borders. The border-s-* and the border-e-* are the border-inline-start and the border-inline-end. The border-s-2 is the border-left-width: 2px in the LTR and the border-right-width: 2px in the RTL .
<div class="border-s-2 border-e">
<!-- LTR: border-left-width: 2px; border-right-width: 1px -->
<!-- RTL: border-right-width: 2px; border-left-width: 1px -->
</div>The border radius. The rounded-s-* and the rounded-e-* are the logical corners. The rounded-ss-* is the start-start corner, the rounded-se-* is the start-end, the rounded-ee-* is the end-end, and the rounded-es-* is the end-start .
<div class="rounded-s-lg rounded-ee-lg">
<!-- LTR: rounded-left-lg; rounded-bottom-right-lg -->
<!-- RTL: rounded-right-lg; rounded-bottom-left-lg -->
</div>The text alignment. The text-start and the text-end are the text-align: start and the text-align: end. The text-start is the left in the LTR and the right in the RTL .
<p class="text-start">
<!-- LTR: text-align: left -->
<!-- RTL: text-align: right -->
</p>The float and the clear. The float-start and the float-end are the float: inline-start and the float: inline-end. The clear-start and the clear-end are the equivalents .
The scroll margin and padding. The scroll-ms-*, the scroll-me-*, the scroll-ps-*, and the scroll-pe-* are the logical counterparts of the scroll margin and the scroll padding .
b. The block-axis logical utilities
The block-axis utilities are the spacing along the block direction — the vertical direction in the horizontal writing modes. They were added in Tailwind v4.2, and they are the counterparts of the inline-axis utilities.
The margin. The mbs-* and the mbe-* are the margin-block-start and the margin-block-end. The mbs-6 is the margin-top: 1.5rem in the horizontal writing mode .
<div class="mbs-6 mbe-2">
<!-- margin-block-start: 1.5rem; margin-block-end: 0.5rem -->
</div>The padding. The pbs-* and the pbe-* are the padding-block-start and the padding-block-end. The pbs-4 is the padding-top: 1rem in the horizontal writing mode .
The border. The border-bs and the border-be are the border-block-start and the border-block-end .
The inset. The inset-bs-* and the inset-be-* are the inset-block-start and the inset-block-end. The inset-bs-0 pins the element to the block-start edge .
The size. The block-* and the inline-* are the block-size and the inline-size. The block-64 is the block-size: 16rem, and the inline-full is the inline-size: 100% .
<div class="block-64 inline-full max-block-screen max-inline-lg">
<!-- block-size: 16rem; inline-size: 100% -->
<!-- max-block-size: 100vh; max-inline-size: 32rem -->
</div>c. The migration and the patterns
The migration from the physical classes. The migration is the mechanical replacement. The ml-* becomes the ms-*, the mr-* becomes the me-*, the pl-* becomes the ps-*, the pr-* becomes the pe-*, the left-* becomes the start-*, the right-* becomes the end-*, the text-left becomes the text-start, and the text-right becomes the text-end .
| The physical | The logical | The LTR | The RTL |
|---|---|---|---|
ml-* | ms-* | left | right |
mr-* | me-* | right | left |
pl-* | ps-* | left | right |
pr-* | pe-* | right | left |
left-* | start-* | left | right |
right-* | end-* | right | left |
text-left | text-start | left | right |
text-right | text-end | right | left |
rounded-l-* | rounded-s-* | left | right |
rounded-r-* | rounded-e-* | right | left |
border-l | border-s | left | right |
border-r | border-e | right | left |
float-left | float-start | left | right |
float-right | float-end | right | left |
The dir attribute. The dir attribute is set on the <html> element, or on the subtree. The <html lang="ar" dir="rtl"> sets the RTL for the whole document. The dynamic switch sets the attribute from the locale .
<html lang="ar" dir="rtl">The icon flip. The icons that point in the reading direction — the chevrons, the arrows, the back buttons — should flip in the RTL. The rtl:scale-x-[-1] flips the icon horizontally .
<ChevronRight class="rtl:scale-x-[-1]" />The variant combination. The logical utilities combine with the responsive and the state variants. The md:ms-4 applies the ms-4 at the md breakpoint, and the hover:ps-2 applies the ps-2 on the hover .
The coexistence with the physical. The physical utilities are still available, and they are the right choice when the physical side is the intent — the fixed positioning that must not flip, the decorative border that must stay on the same side. The logical utilities are the default, and the physical are the exception .
Complete Example Session
<!-- ============================================
PART 1: THE BASIC LOGICAL SPACING
============================================ -->
<div class="ms-4 me-8 ps-2 pe-6">
<!-- LTR: margin-left: 1rem; margin-right: 2rem -->
<!-- padding-left: 0.5rem; padding-right: 1.5rem -->
<!-- RTL: margin-right: 1rem; margin-left: 2rem -->
<!-- padding-right: 0.5rem; padding-left: 1.5rem -->
</div>
<!-- ============================================
PART 2: THE INSET
============================================ -->
<div class="absolute start-0 end-0">
<!-- LTR: left: 0; right: 0 -->
<!-- RTL: right: 0; left: 0 -->
</div>
<!-- ============================================
PART 3: THE BORDERS
============================================ -->
<div class="border-s-2 border-e border-gray-300">
<!-- LTR: border-left-width: 2px; border-right-width: 1px -->
<!-- RTL: border-right-width: 2px; border-left-width: 1px -->
</div>
<!-- ============================================
PART 4: THE BORDER RADIUS
============================================ -->
<div class="rounded-s-lg rounded-ee-lg">
<!-- LTR: rounded-left-lg; rounded-bottom-right-lg -->
<!-- RTL: rounded-right-lg; rounded-bottom-left-lg -->
</div>
<!-- ============================================
PART 5: THE TEXT ALIGNMENT
============================================ -->
<p class="text-start">
<!-- LTR: text-align: left -->
<!-- RTL: text-align: right -->
</p>
<!-- ============================================
PART 6: THE FLOAT AND THE CLEAR
============================================ -->
<img src="image.jpg" class="float-start" />
<!-- LTR: float: left -->
<!-- RTL: float: right -->
<div class="clear-end">
<!-- LTR: clear: right -->
<!-- RTL: clear: left -->
</div>
<!-- ============================================
PART 7: THE BLOCK-AXIS SPACING
============================================ -->
<div class="mbs-6 mbe-2 pbs-4 pbe-8">
<!-- margin-block-start: 1.5rem; margin-block-end: 0.5rem -->
<!-- padding-block-start: 1rem; padding-block-end: 2rem -->
</div>
<!-- ============================================
PART 8: THE LOGICAL SIZE
============================================ -->
<div class="block-64 inline-full max-block-screen max-inline-lg">
<!-- block-size: 16rem; inline-size: 100% -->
<!-- max-block-size: 100vh; max-inline-size: 32rem -->
</div>
<!-- ============================================
PART 9: THE RTL VARIANT
============================================ -->
<div dir="rtl">
<div class="text-left rtl:text-right">
<!-- LTR: text-align: left -->
<!-- RTL: text-align: right -->
</div>
<ChevronRight class="rtl:scale-x-[-1]" />
<!-- The icon flips in the RTL -->
</div>
<!-- ============================================
PART 10: THE COMPLETE PAGE
============================================ -->
<html lang="ar" dir="rtl">
<body>
<header class="flex items-center justify-between p-4">
<div class="ms-2">Logo</div>
<nav class="me-2 flex gap-4">
<a href="#" class="ps-2 pe-2">Home</a>
<a href="#" class="ps-2 pe-2">About</a>
</nav>
</header>
<main class="flex">
<aside class="w-64 border-e border-gray-200 p-4">
<nav class="space-y-2">
<a href="#" class="block ps-2 pe-2">Dashboard</a>
<a href="#" class="block ps-2 pe-2">Settings</a>
</nav>
</aside>
<article class="flex-1 p-6">
<h1 class="text-start text-2xl font-bold">Article Title</h1>
<p class="mt-4 text-start">Article content...</p>
</article>
</main>
</body>
</html>The ten parts show the basic logical spacing, the inset, the borders, the border radius, the text alignment, the float and the clear, the block-axis spacing, the logical size, the rtl variant, and the complete page.
Quick Reference
The Inline-Axis Logical Utilities
| The logical | The CSS property | The LTR | The RTL |
|---|---|---|---|
ms-* | margin-inline-start | left | right |
me-* | margin-inline-end | right | left |
ps-* | padding-inline-start | left | right |
pe-* | padding-inline-end | right | left |
start-* | inset-inline-start | left | right |
end-* | inset-inline-end | right | left |
inset-s-* | inset-inline-start | left | right |
inset-e-* | inset-inline-end | right | left |
The Border and the Radius
| The logical | The CSS property |
|---|---|
border-s-* | border-inline-start-width |
border-e-* | border-inline-end-width |
rounded-s-* | border-start-start-radius, border-end-start-radius |
rounded-e-* | border-start-end-radius, border-end-end-radius |
rounded-ss-* | border-start-start-radius |
rounded-se-* | border-start-end-radius |
rounded-ee-* | border-end-end-radius |
rounded-es-* | border-end-start-radius |
The Text, the Float, and the Clear
| The logical | The physical | The LTR | The RTL |
|---|---|---|---|
text-start | text-left | left | right |
text-end | text-right | right | left |
float-start | float-left | left | right |
float-end | float-right | right | left |
clear-start | clear-left | left | right |
clear-end | clear-right | right | left |
The Block-Axis Logical Utilities
| The logical | The CSS property |
|---|---|
mbs-* | margin-block-start |
mbe-* | margin-block-end |
pbs-* | padding-block-start |
pbe-* | padding-block-end |
border-bs | border-block-start |
border-be | border-block-end |
inset-bs-* | inset-block-start |
inset-be-* | inset-block-end |
block-* | block-size |
inline-* | inline-size |
The Migration
| The physical | The logical |
|---|---|
ml-* | ms-* |
mr-* | me-* |
pl-* | ps-* |
pr-* | pe-* |
left-* | start-* or inset-s-* |
right-* | end-* or inset-e-* |
text-left | text-start |
text-right | text-end |
rounded-l-* | rounded-s-* |
rounded-r-* | rounded-e-* |
border-l | border-s |
border-r | border-e |
float-left | float-start |
float-right | float-end |
Best Practices
✅ Do This:
<!-- Use the logical spacing -->
<div class="ms-4 me-8 ps-2 pe-6"> <!-- ✅ -->
<!-- Use the logical inset -->
<div class="absolute start-0 end-0"> <!-- ✅ -->
<!-- Use the logical text alignment -->
<p class="text-start"> <!-- ✅ -->
<!-- Use the logical borders and radius -->
<div class="border-s-2 rounded-s-lg"> <!-- ✅ -->
<!-- Use the block-axis for the vertical spacing -->
<div class="mbs-6 pbs-4"> <!-- ✅ -->
<!-- Use the dir attribute on the html -->
<html dir="rtl"> <!-- ✅ -->
<!-- Use the rtl variant for the icons -->
<ChevronRight class="rtl:scale-x-[-1]" /> <!-- ✅ -->❌ Don’t Do This:
<!-- Don't use the physical properties for the directional spacing -->
<div class="ml-4 mr-8 pl-2 pr-6"> <!-- the RTL breaks --> // ❌
<!-- Don't use the text-left for the directional alignment -->
<p class="text-left"> <!-- the RTL breaks --> // ❌
<!-- Don't use the left/right for the directional positioning -->
<div class="absolute left-0 right-0"> <!-- the RTL breaks --> // ❌
<!-- Don't forget the dir attribute -->
<html> <!-- the logical properties do not flip --> // ❌
<!-- Don't use the block-axis for the horizontal spacing -->
<div class="mt-4 mb-8"> <!-- the writing mode --> // ❌
<!-- Don't forget the icon flip -->
<ChevronRight /> <!-- the icon points the wrong way --> // ❌Common Pitfalls
| The pitfall | The why | The fix |
|---|---|---|
| The layout does not flip | The missing dir attribute | Add the dir="rtl" |
| The margin is on the wrong side | The physical ml-* | Use the ms-* |
| The padding is on the wrong side | The physical pl-* | Use the ps-* |
| The text is on the wrong side | The physical text-left | Use the text-start |
| The icon points the wrong way | The missing flip | Use the rtl:scale-x-[-1] |
| The border is on the wrong side | The physical border-l | Use the border-s |
| The block-axis does not flip | The horizontal writing mode | The block-axis is the vertical |
Real-World Examples
1. The Basic Spacing
<div class="ms-4 me-8">2. The Padding
<div class="ps-2 pe-6">3. The Inset
<div class="absolute start-0 end-0">4. The Text Alignment
<p class="text-start">5. The Border
<div class="border-s-2">6. The Radius
<div class="rounded-s-lg">7. The Float
<img class="float-start" />8. The Block-Axis
<div class="mbs-6 pbs-4">9. The RTL Variant
<ChevronRight class="rtl:scale-x-[-1]" />10. The Complete Page
<html dir="rtl">
<header class="flex justify-between">
<div class="ms-2">Logo</div>
<nav class="me-2 flex gap-4">...</nav>
</header>
</html>Visual
The Logical-to-Physical Resolution
┌──────────────────────────────────────────────────────────────┐
│ THE LOGICAL-TO-PHYSICAL RESOLUTION │
│ │
│ LTR (dir="ltr"): │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ margin-inline-start ──► margin-left │ │
│ │ margin-inline-end ──► margin-right │ │
│ │ padding-inline-start ──► padding-left │ │
│ │ padding-inline-end ──► padding-right │ │
│ │ inset-inline-start ──► left │ │
│ │ inset-inline-end ──► right │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ RTL (dir="rtl"): │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ margin-inline-start ──► margin-right │ │
│ │ margin-inline-end ──► margin-left │ │
│ │ padding-inline-start ──► padding-right │ │
│ │ padding-inline-end ──► padding-left │ │
│ │ inset-inline-start ──► right │ │
│ │ inset-inline-end ──► left │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ The browser resolves the physical side from the dir. │
│ │
└──────────────────────────────────────────────────────────────┘The Physical vs the Logical
┌──────────────────────────────────────────────────────────────┐
│ THE PHYSICAL vs THE LOGICAL │
│ │
│ THE PHYSICAL (ml-4): │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ LTR: margin-left: 1rem │ │
│ │ RTL: margin-left: 1rem ← the WRONG side │ │
│ │ │ │
│ │ The developer must add: │ │
│ │ <div class="ml-4 rtl:mr-4 rtl:ml-0"> │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ THE LOGICAL (ms-4): │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ LTR: margin-left: 1rem │ │
│ │ RTL: margin-right: 1rem ← the CORRECT side │ │
│ │ │ │
│ │ One class: │ │
│ │ <div class="ms-4"> │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────┘The dir Attribute
┌──────────────────────────────────────────────────────────────┐
│ THE dir ATTRIBUTE │
│ │
│ <html lang="en" dir="ltr"> │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ The ms-4 is the margin-left. │ │
│ │ The text-start is the text-align: left. │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ <html lang="ar" dir="rtl"> │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ The ms-4 is the margin-right. │ │
│ │ The text-start is the text-align: right. │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ The dir can be set on a subtree: │
│ <div dir="rtl"> │
│ <p class="ms-4"> <!-- the margin-right --> │
│ </div> │
│ │
│ The nearest ancestor with the dir wins. │
│ │
└──────────────────────────────────────────────────────────────┘The Icon Flip
┌──────────────────────────────────────────────────────────────┐
│ THE ICON FLIP │
│ │
│ LTR: │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ <ChevronRight /> │ │
│ │ → the arrow points right (the "next") │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ RTL: │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ <ChevronRight class="rtl:scale-x-[-1]" /> │ │
│ │ → the arrow points left (the "next") │ │
│ │ │ │
│ │ The scale-x-[-1] flips the icon horizontally. │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ The icons do not flip automatically; the rtl variant does. │
│ │
└──────────────────────────────────────────────────────────────┘Summary
| Item | Value |
|---|---|
| The logical margin | ms-*, me-* |
| The logical padding | ps-*, pe-* |
| The logical inset | start-*, end-* or inset-s-*, inset-e-* |
| The logical border | border-s-*, border-e-* |
| The logical radius | rounded-s-*, rounded-e-*, rounded-ss-*, etc. |
| The logical text | text-start, text-end |
| The logical float | float-start, float-end |
| The block-axis | mbs-*, mbe-*, pbs-*, pbe-* |
The dir attribute | The flip trigger |
The rtl variant | The direction-specific override |
Key takeaways:
- The logical properties use the writing direction to resolve the physical side. The
ms-*is themargin-inline-start, and it is the left in the LTR and the right in the RTL. Theme-*, theps-*, and thepe-*are the counterparts. Thestart-*and theend-*replace theleft-*and theright-*. - The logical utilities flip automatically with the
dirattribute. The<html dir="rtl">sets the direction, and the browser flips every logical property. The developer writes one class, and the layout adapts to the direction . - The
text-startand thetext-endreplace thetext-leftand thetext-right. Thetext-startis the left in the LTR and the right in the RTL. The physicaltext-leftdoes not flip, and it breaks the RTL layout . - The borders and the radius have the logical counterparts. The
border-s-*and theborder-e-*are the logical borders, and therounded-s-*, therounded-e-*, therounded-ss-*, therounded-se-*, therounded-ee-*, and therounded-es-*are the logical corners . - The block-axis utilities were added in v4.2. The
mbs-*, thembe-*, thepbs-*, thepbe-*, theborder-bs, theborder-be, theinset-bs-*, theinset-be-*, theblock-*, and theinline-*are the block-axis logical utilities . - The
start-*and theend-*are deprecated in favor of theinset-s-*and theinset-e-*. The new names align with the broader logical naming convention, and the old names still work . - The icons need the
rtl:scale-x-[-1]flip. The icons do not flip automatically, and the chevrons, the arrows, and the back buttons must be flipped explicitly in the RTL . - The symmetric utilities work correctly in the RTL. The
mx-*, thepx-*, thep-*, and them-*apply to both sides, and they do not need the logical counterparts .
Remember: The logical properties are the foundation of the RTL support. The ms-*, the me-*, the ps-*, and the pe-* are the inline-axis spacing, and the start-*, the end-*, the text-start, and the text-end are the positioning and the alignment. The block-axis utilities — the mbs-*, the pbs-*, the inset-bs-*, and the inline-* — were added in v4.2. The dir attribute is the flip trigger, and the rtl variant handles the direction-specific overrides. The result is the layout that adapts to the reading direction, which is the foundation of the internationalized web.
Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)
⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free
🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!