# mnm-tailwindcss-rtl
> tailwindcss-rtl
Latest version **0.9.9** (published 2022-06-25) · MIT license · 0 weekly downloads
## Install
```sh
npm install mnm-tailwindcss-rtl
pnpm add mnm-tailwindcss-rtl
yarn add mnm-tailwindcss-rtl
bun add mnm-tailwindcss-rtl
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.9.9 |
| Published | 2022-06-25 |
| First published | 2022-01-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 26.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 355 |
| Author | 20lives |
| Maintainers | m2008m1033m |
| Keywords | tailwind, tailwindcss, rtl, tailwind plugin |
## Links
- npm: https://www.npmjs.com/package/mnm-tailwindcss-rtl
- Repository: https://github.com/20lives/tailwindcss-rtl
- Homepage: https://github.com/20lives/tailwindcss-rtl#readme
- Issues: https://github.com/20lives/tailwindcss-rtl/issues
- npm.io page: https://npm.io/package/mnm-tailwindcss-rtl
## Alternatives
- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads
## Recent versions
- 0.9.9 (latest) — 2022-06-25
- 0.9.8 — 2022-06-25
- 0.9.7 — 2022-06-17
- 0.9.6 — 2022-06-17
- 0.9.5 — 2022-06-17
- 0.9.4 — 2022-06-17
- 0.9.3 — 2022-06-17
- 0.9.2 — 2022-06-17
- 0.9.1 — 2022-06-17
- 0.9.0 — 2022-06-17
- 0.8.1 — 2022-01-24
- 0.8.0 — 2022-01-24
## 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](https://workcation-rtl.netlify.app/en/)
[Workcation-nuxt-i18n-rtl](https://github.com/20lives/workcation-nuxt-i18n-rtl)
## 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:
```html
```
Adding `dir="ltr"` is optional, because unless specified otherwise, LTR is assumed to be the default.
## Installation
Install **tailwindcss-rtl** package:
```bash
# Yarn
yarn add tailwindcss-rtl --dev
# NPM
npm install tailwindcss-rtl --save-dev
```
Require `tailwindcss-rtl` in the project `tailwind.config.js` file:
```javascript
plugins: [
require('tailwindcss-rtl'),
],
```
## 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 |
| text-start | text aligned at the start direction |
| text-end | text aligned at the end direction |
| float-start | float to start direction |
| float-end | float to end direction |
| start-[X] | placement of positioned elements on start |
| end-[X] | placement of positioned elements on end |
| 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 |
[npm-version]: https://img.shields.io/npm/v/tailwindcss-rtl.svg?style=flat-square
[npm-downloads]: https://img.shields.io/npm/dw/tailwindcss-rtl?style=flat-square
[npm]: https://www.npmjs.org/package/tailwindcss-rtl
---
_Source: https://npm.io/package/mnm-tailwindcss-rtl · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._