A tailwindcss plugin, that makes working with directions a breeze.
Check out the Live Example to try it for yourself.
$ npm install --dev tailwind-direction
# or
$ yarn add -D tailwind-direction- Add the tailwind-direction plugin to the
tailwind.config.jsfile
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
corePluginsin your owntailwind.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
dirattribute:
<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.
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.
Currently the affected core plugins are:
- borderRadius
- borderWidth
- clear
- divide
- float
- inset
- margin
- padding
- space
- textAlign
- transformOrigin
- (Add new ones if you think others are missing)
I created another plugin that makes working with bi-direction less painful with Next.js, check it out: https://github.com/yassinebridi/next-direction