Skip to content

Adds direction (LTR, RTL) variants to your Tailwind project


Notifications You must be signed in to change notification settings


Folders and files

Last commit message
Last commit date

Latest commit



20 Commits

Repository files navigation

Tailwind Direction

Total Downloads Latest Release

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 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: [

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.


Tailwind Direction is licensed under the MIT license.