Tailwind Direction adds a custom direction variant to your tailwind project, letting you have custom CSS rules for LTR and RTL layouts.

Note: This package requires Tailwind >= v1.0.1.

Install the package via NPM/Yarn.

# Yarn yarn add tailwindcss-dir --dev # NPM npm install tailwindcss-dir --save-dev

Now, setup the plugin in your Tailwind config's plugins section. Currently the plugin doesn't offer any configuration.

plugins: [ require('tailwindcss-dir')(), ],

Finally, you can use the plugin and add it to modules you want to use it with.

variants: { float: ['responsive', 'direction'], margin: ['responsive', 'direction'], padding: ['responsive', 'direction'], },

The plugin adds ltr and rtl variants to your modules. With the default Tailwind configuration, you can use them like so:

<div class="text-green text-2xl ltr:pl-4 rtl:pr-4">	Hello world. </div>

Tailwind Direction is licensed under the MIT license.