Right to left
Instructions for how to make interactivity and Tailwind styling work with right-to-left (rtl) languages.From its SKILL.md
npx -y skills add ben-basten/skills --skill right-to-leftAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
3.6 KB, 679 tokens by cl100k_base, as published. Nobody here has run it
Styling
If not already present, add the following to the Tailwind config CSS file:
@custom-variant rtl (&:dir(rtl));
The Tailwind @custom-variant called rtl can be used to apply styles when the page is in rtl mode. Usage looks like rtl:<class-name>. This is used to mirror styles for CSS properties that don't natively support direction changes, such as translateX.
Logical inset utilities (ex. inset-s-<value>) require Tailwind v4.2.0 or higher.
The following table shows a mapping of Tailwind classes that have been converted to support rtl languages.
| Old class name | Converted class name | Notes |
|---|---|---|
left-<value> | inset-s-<value> | Positions from the start edge (left in LTR, right in RTL) |
right-<value> | inset-e-<value> | Positions from the end edge (right in LTR, left in RTL) |
ml-<value> | ms-<value> | Margin on start side |
mr-<value> | me-<value> | Margin on end side |
pl-<value> | ps-<value> | Padding on start side |
pr-<value> | pe-<value> | Padding on end side |
rounded-r-<value> | rounded-e-<value> | Rounded corner on end side |
rounded-l-<value> | rounded-s-<value> | Rounded corner on start side |
border-l-<value> | border-s-<value> | Border on start side |
border-r-<value> | border-e-<value> | Border on end side |
origin-left | origin-left rtl:origin-right | Transform origin at start |
translate-x-<value> (with -) | translate-x-<value> rtl:-translate-x-<value> | Invert translateX for RTL using rtl: modifier |
bg-linear-to-tr | bg-linear-to-tr rtl:bg-linear-to-tl | Mirror any gradients for RTL |
Directionality
Any navigational arrows on the page such as forward/back buttons or carousel controls should be flipped for rtl languages. This should happen automatically if grid/flexbox are being used to layout the buttons. The arrow icons need to be mirrored too, consider using rtl:rotate-180 to fix the visual direction of the arrow.
Interactivity
- Any arrow key handlers that use
ArrowLeftorArrowRightshould useisForwardArrowandisBackwardArrowutility functions to invert the behavior for rtl languages. - Horizontal carousels should flip the direction of their x-axis animations for rtl languages.
- Horizontal animations like underline hover effects or infinitely scrolling marquees should flip their direction for rtl languages.
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.