Skip to content
Adds direction (LTR, RTL) variants to your Tailwind project
Branch: master
Clone or download
Latest commit 83d92da May 25, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
jest Added tests Oct 7, 2018
src Fixed the plugin for tailwind 1.0 Apr 4, 2019
.editorconfig Initial commit Oct 7, 2018
.gitignore Initial commit Oct 7, 2018
.prettierrc Initial commit Oct 7, 2018 Added README and license Oct 7, 2018
package.json 3.0.2 May 25, 2019

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.

modules: {
	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.

You can’t perform that action at this time.