Tailwind bi-directionality plugin

  • By Yassine Bridi
  • Last update: Oct 1, 2022
  • Comments: 5

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

Github

https://github.com/yassinebridi/tailwind-direction

Comments(5)

  • 1

    PurgeCSS config

    Is there any recommendation on purge configuration? Currently, when running in production mode, tailwind is purging some classes injected by this lib, such as:

    [dir=rtl] .right-0 {
    left: 0
}

    The above is only found in dev mode without purging.

    A temporary fix for me was to add:

    safelist: {
    greedy: [/(right-0)|(left-0)/]
}
  • 2

    Add tailwind preset to disable replaced core plugins

    As we discussed in #2, This pull exports a tailwind config preset that disables the core plugins we replace. I also updated the README to reflect this change.

  • 3

    mention the need to disable replaced core plugins

    Add a step under Usage to disable the core plugins that this plugin replaces.

    Maybe instead of having to list each of these core plugins, the plugin can export a non-default helper object that contains the replaced core plugins?

    Example

    // tailwind.config.js
const replacedPlugins = require("tailwind-direction").plugins;

module.exports = {
  ...
  plugins: [
    require('tailwind-direction').default,
  ],
  corePlugins: {
    ...replacedPlugins, // these will have a value of `false`
  },
...
};

    Documentation reference

    https://tailwindcss.com/docs/configuration#core-plugins

  • 4

    Overriding Direction for specific elements

    Is there a way to override an element to not change direction? For example, let's say I have a button that scrolls to the top of the page on click, and I do not want it to have right-0 change to left-0 by the css injected from this plugin... Is there a way? I tried to override the parent div with a dir="ltr" to force it but that doesn't work obviously.

    Thanks for sharing this lib!

  • 5

    Overriding html tag dir attribute

    I had multiple use-cases when I needed to override the direction set inside the html tag dir attribute. For example, when I want the whole document to be RTL, but one section to ignore the rtl rules injected and display as LTR.

    Setting a dir="ltr" on the div that wants the override of course wouldn't work, but I can't think of a workaround that works with this lib... Any genius ideas :) ?

Popular Tag

Related