Skip to content

yassinebridi/tailwind-direction

Repository files navigation

tailwind-direction tailwind-direction minzip package size MIT Licence Twitter Follow

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.

Affected core plugins

Currently the affected core plugins are:

  • borderRadius
  • borderWidth
  • clear
  • divide
  • float
  • inset
  • margin
  • padding
  • space
  • textAlign
  • transformOrigin

Not Affected core plugins(But needs to be):

  • (Add new ones if you think others are missing)

You might like

I created another plugin that makes working with bi-direction less painful with Next.js, check it out: https://github.com/yassinebridi/next-direction