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

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 different style for RTL.

With tailwindcss-rtl plugin you will be able to support both RTL and LTR in the same style.

Live demo

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

Workcation live demo

Workcation-nuxt-i18n-rtl

Requirements

This plugin will work only on tailwindcss 1.4 and above.

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 the project tailwind.config.js file:

plugins: [
  require('tailwindcss-rtl'),
],

Old browsers support

Some of the features used in this plugin are not compatible with older browers such as IE11, if you need to support those browsers, add target: 'ie11' to your tailwind config file, this will replace new features with methods supported by older browsers.

Utilities

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

Class	Description
ps-[X]	padding on start direction
pe-[X]	padding on end direction
ms-[X]	margin on start direction
me-[X]	margin on end direction
float-start	float to start direction
float-end	float to end direction
start-[X]	float to start direction
end-[X]	float to end direction
clear-start	clear to start direction
clear-end	clear to end direction
rounded-s-[X]	rounded borders on start direction
rounded-e-[X]	rounded borders on end direction
rounded-ts-[X]	rounded borders on top start direction
rounded-te-[X]	rounded borders on top end direction
rounded-bs-[X]	rounded borders on bottom start direction
rounded-be-[X]	rounded borders on bottom end direction
border-s-[X]	border width on start direction
border-e-[X]	bordern width on end direction
space-s-[X]	space between child
divide-s-[X]	border width between child elements