You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

mnm-tailwindcss-rtl

Package Overview
Dependencies
0
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

mnm-tailwindcss-rtl

tailwindcss-rtl <i


Version published
Weekly downloads
307
increased by802.94%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

tailwindcss-rtl

Total Downloads 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 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

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

Adding dir="ltr" is optional, because unless specified otherwise, LTR is assumed to be the default.

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'),
],

Utilities

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

ClassDescription
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-starttext aligned at the start direction
text-endtext aligned at the end direction
float-startfloat to start direction
float-endfloat to end direction
start-[X]placement of positioned elements on start
end-[X]placement of positioned elements on end
clear-startclear to start direction
clear-endclear 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

Keywords

FAQs

Package last updated on 25 Jun 2022

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc