Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/20lives/tailwindcss-rtl
Enabling bidirectional support on tailwindcss framework
https://github.com/20lives/tailwindcss-rtl
css direction logical ltr rtl tailwindcss tailwindcss-rtl
Last synced: about 1 month ago
JSON representation
Enabling bidirectional support on tailwindcss framework
- Host: GitHub
- URL: https://github.com/20lives/tailwindcss-rtl
- Owner: 20lives
- License: mit
- Created: 2020-04-07T19:49:28.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-24T10:04:24.000Z (over 1 year ago)
- Last Synced: 2024-07-20T21:42:59.541Z (about 2 months ago)
- Topics: css, direction, logical, ltr, rtl, tailwindcss, tailwindcss-rtl
- Language: JavaScript
- Homepage:
- Size: 400 KB
- Stars: 347
- Watchers: 6
- Forks: 33
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-tailwindcss - Bidirectional - Adds utilities for creating multilingual bidirectional layouts. (Plugins)
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
```
**Note:** _for all utilities to work as expected adding the **dir** attribute (both "rtl"/"ltr") to a top level tag is mandatory), even when "ltr" is assumed to be 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