Tailwind-direction NPM

tailwind-direction

A tailwindcss plugin, that makes working with directions a breeze.

Preview

Check out the Live Example to try it for yourself.

Installation

$ npm install --dev tailwind-direction
# or
$ yarn add -D tailwind-direction

Usage

Add the tailwind-direction plugin to the tailwind.config.js file

plugins: [
  require('tailwind-direction').default,
],

Extend our configuration preset which disables the core tailwind plugins we replace (otherwise, directional utilitites will produce both left and right css rules at the same time).

presets: [
  require("tailwind-direction").configPreset,
],

⚠ Warning: If you are modifing corePlugins in your own tailwind.config.css, you have to use the object syntax while extending our configuration preset. This is because the array syntax does not support merging and your own configuration will have priority. If you must use the array syntax you have to manually disable all the core plugins we replace.

Change the html tag dir attribute:

<html dir="rtl">
  ...
</html>

dir can be:

dir: "ltr" | "rtl"

That's it, now your tailwind utilities works out of the box with directions in mind.

Comparison

There are two other know packages that solves the same problem:

tailwindcss-dir: This package adds new variants ltr, rtl, that you have to add for every utility by hand.
tailwindcss-rtl: This package takes a different and a better approach, instead of adding new variants, you replace the targeted variants, like mr, rounded-bl, with it's direction corresponding utilites: ms, rounded-be
tailwind-direction 🚀: What this package does, is replacing the core utilites, with direction in mind ones, so you can just plug-in this packages and you are done, no refractoring proccess needed.