https://github.com/RonMelkhior/tailwindcss-dir

Adds direction (LTR, RTL) variants to your Tailwind project
https://github.com/RonMelkhior/tailwindcss-dir

css left-to-right right-to-left rtl tailwind tailwindcss

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/RonMelkhior/tailwindcss-dir
• Owner: RonMelkhior
• License: mit
• Created: 2018-10-06T22:58:23.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-10-28T09:37:06.000Z (almost 4 years ago)
• Last Synced: 2024-07-23T19:01:08.504Z (about 2 months ago)
• Topics: css, left-to-right, right-to-left, rtl, tailwind, tailwindcss
• Language: JavaScript
• Homepage:
• Size: 54.7 KB
• Stars: 224
• Watchers: 3
• Forks: 11
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

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

```bash

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

```js

plugins: [

	require('tailwindcss-dir')(),

],

```

Finally, you can use the plugin and add it to modules you want to use it with.

```js

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:

```html



	Hello world.



```


# License

Tailwind Direction is licensed under the MIT license.