New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

tailwindcss-rtl

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

tailwindcss-rtl

0.2.0
Source
npm

Version published: 5 years ago

Weekly downloads: 22K; increased by0.34%

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

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.

A full example can be seen here: workaction-rtl

This plugin was inspired by Elad Shechter's medium article tackling the same issue with Sass.

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

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

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

Keywords

FAQs

What is tailwindcss-rtl?

Is tailwindcss-rtl popular?

Is tailwindcss-rtl well maintained?

Package last updated on 09 Apr 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install