tailwind-dir v0.0.7
Tailwind-dir plugin for Tailwindcss
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 tailwind-dir plugin you will be able to support both RTL and LTR in the same style.
A full example can be seen here: workaction-rtl source
This plugin was inspired by Elad Shechter's medium article tackling the same issue with Sass.
Installation
Install `tailwind-dir' package:
# Yarn
yarn add tailwind-dir --dev
# NPM
npm install tailwind-dir --save-devRequire tailwind-dir in tailwind.config.js file:
plugins: [
require('tailwind-dir'),
],Utilities
tailwind-dir 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: xrem | pedding-right: xrem |
| pe-X | padding on end direction | padding-right: xrem | pedding-left: xrem |
Margin
| Class | Description | LTR Property | RTL Property |
|---|---|---|---|
| ms-X | margin on start direction | margin-left: xrem | margin-right: xrem |
| me-X | margin on end direction | margin-right: xrem | margin-left: xrem |
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 |
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 |
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 |
Usage
Replace all padding, margins, floats and insets utilities with the corresponding utilities.
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">