Skip to content

RonMelkhior/tailwindcss-dir

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

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.