tailwindcss-rtl
Advanced tools
Internationalization in semitic languages needs more than just translating texts, you would also need to mirror the layout horizontally.
This can be done by adding dir="rtl" the the layout body tag, but this is propably not be enough and you will need to create a diffirect style for RTL.
With tailwindcss-rtl plugin you will be able to support both RTL and LTR in the same style.
This plugin was inspired by Elad Shechter's medium article tackling the same issue with Sass.
Full live demo based on the official tailwindcss course project is available here: Workcation
Replace all utilities based on Right/Left with the new utilities specified below.
for example when you create an LTR layout and you would like to add left padding to an element you would normaly use pl-6, left is the start direction in LTR so you will replace it with ps-6.
Now add dir="rtl" or dir="ltr" attribute to your top level layout element:
<body dir="rtl">
Install tailwindcss-rtl package:
# Yarn
yarn add tailwindcss-rtl --dev
# NPM
npm install tailwindcss-rtl --save-dev
Require tailwindcss-rtl in tailwind.config.js file:
plugins: [
require('tailwindcss-rtl'),
],
*tailwindcss-rtl adds the start and end notations as substitue for left and right.
| Class | Description | LTR Property | RTL Property |
|---|---|---|---|
| ps-[X] | padding on start direction | padding-left: [x]rem | pedding-right: [x]rem |
| pe-[X] | padding on end direction | padding-right: [x]rem | pedding-left: [x]rem |
| Class | Description | LTR Property | RTL Property |
|---|---|---|---|
| ms-[X] | margin on start direction | margin-left: [x]rem | margin-right: [x]rem |
| me-[X] | margin on end direction | margin-right: [x]rem | margin-left: [x]rem |
| Class | Description | LTR Property | RTL Property |
|---|---|---|---|
| text-start | float to start direction | text-align: left | right: right |
| text-end | float to end direction | text-align: right | left: left |
| Class | Description | LTR Property | RTL Property |
|---|---|---|---|
| float-start | float to start direction | float: left | float: right |
| float-end | float to end direction | float: right | float: left |
| Class | Description | LTR Property | RTL Property |
|---|---|---|---|
| start-[X] | float to start direction | left: [x] | right: [x] |
| end-[X] | float to end direction | right: [x] | left: [x] |
| Class | Description | LTR Property | RTL Property |
|---|---|---|---|
| clear-start | clear to start direction | clear: left | clear: left |
| clear-end | clear to end direction | clear: right | clear: right |
| Class | LTR Property | RTL Property |
|---|---|---|
| rounded-s-[X] | border-top-left-radius: [x] border-bottom-left-radius: [x] | border-top-right-radius: [x] border-bottom-right-radius: [x] |
| rounded-e-[X] | border-top-right-radius: [x] border-bottom-right-radius: [x] | border-top-left-radius: [x] border-bottom-left-radius: [x] |
| rounded-ts-[X] | border-top-left-radius: [x] | border-top-right-radius: [x] |
| rounded-te-[X] | border-top-right-radius: [x] | border-top-left-radius: [x] |
| rounded-bs-[X] | border-bottom-right-radius: [x] | border-top-right-radius: [x] |
| rounded-be-[X] | border-bottom-left-radius: [x] | border-top-left-radius: [x] |
FAQs
tailwindcss-rtl <i
The npm package tailwindcss-rtl receives a total of 17,948 weekly downloads. As such, tailwindcss-rtl popularity was classified as popular.
We found that tailwindcss-rtl demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious Go packages are impersonating popular libraries to install hidden loader malware on Linux and macOS, targeting developers with obfuscated payloads.
Security News
Bybit's $1.46B hack by North Korea's Lazarus Group pushes 2025 crypto losses to $1.6B in just two months, already surpassing all of 2024's $1.49B total.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.