Skip to content
Adds direction (LTR, RTL) variants to your Tailwind project
Branch: master
Clone or download
Latest commit 83d92da May 25, 2019
Permalink
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
tests
.editorconfig Initial commit Oct 7, 2018
.gitignore Initial commit Oct 7, 2018
.prettierrc Initial commit Oct 7, 2018
LICENSE.md Added README and license Oct 7, 2018
README.md
package.json 3.0.2 May 25, 2019
yarn.lock

README.md

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
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.

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

You can’t perform that action at this time.