Package Exports

tailwindcss-rtl

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-rtl) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

tailwindcss-rtl

Latest Release

Introduction

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.

Live demo

Full live demo based on the official tailwindcss course project is available here: Workcation

Usage

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">

Installation

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'),
],

Utilities

*tailwindcss-rtl adds the start and end notations as substitue for left and right.

Padding

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

Padding docs

Margin

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

Margin docs

Text-align

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

Text-align docs

Float

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

Float docs

Right/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]

Right/Left docs

Clear

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

Clear docs

Border Radius

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]

Border radius docs