{{ message }}
Repository navigation
Conversation
Replace all directional Tailwind utilities with CSS logical property equivalents, enabling automatic RTL and LTR layout support based on the HTML dir attribute. Changes: - pl-*/pr-* → ps-*/pe-* (padding-inline-start/end) - ml-*/mr-* → ms-*/me-* (margin-inline-start/end) - left-0/right-0 → start-0/end-0 (inset-inline-start/end) - text-left/text-right → text-start/text-end - border-l/border-r → border-s/border-e - rounded-tr/rounded-br → rounded-se/rounded-ee (border-start/end-end-radius) - ml-auto → ms-auto Files changed (14): Alert, DatetimePicker, Dialog, Dropdown (base/header/item), Notifications, Popover, Select, TextField (password/textarea), TimePicker (picker/selector), Wrapper/text-field Requires Tailwind CSS v3.3+ or v4 for logical property support. Usage: set dir=rtl or dir=ltr on <html> element.
Replace directional spacing classes (ml-, mr-, pl-, pr-) with Tailwind CSS logical properties (ms-, me-, ps-, pe-) across all components so layouts flip automatically when dir=rtl is set on the HTML element. Affected components: - Alert - DatetimePicker - Dialog - Dropdown (base, header, item) - Notifications - Popover - Select - TextField (password, textarea) - TimePicker (picker, selector) - Wrapper/TextField Also adds RTL/LTR support documentation section to README.
This reverts commit 4209e67.
…nd logical properties
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds native RTL/LTR support to WireUI by replacing fixed
directional spacing classes (
ml-,mr-,pl-,pr-) withTailwind CSS logical properties (
ms-,me-,ps-,pe-).Setting
dir="rtl"on the HTML element is now enough for allcomponents to flip automatically — no extra CSS needed.
Affected Components
Why Logical Properties?
Tailwind's logical properties are the recommended way to handle
bidirectional layouts. They respect the document's writing direction
without needing separate RTL stylesheets or JavaScript overrides.
Testing
Tested with
dir="rtl"on Kurdish, Arabic, and Persian layouts.