Tailwind Direction

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.

Getting started

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'],
},

Usage

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>

License

Tailwind Direction is licensed under the MIT license.