tailwindcss-plugin-rtl

A plugin that provides a variants to handle RTL direction.

Usage no npm install needed!

<script type="module">
  import tailwindcssPluginRtl from 'https://cdn.skypack.dev/tailwindcss-plugin-rtl';
</script>

README

Tailwind RTL - Plugin

GitHub npm Publish to NPM Package Registry

Tailwind RTL adds a custom rtl variant to your tailwind project, letting you have custom CSS rules for RTL layouts.

Note: This package does not specified by specific version of the tailwindcss

Getting started

Install the package via NPM.

# NPM
npm install tailwindcss-plugin-rtl --save-dev

Now, setup the plugin in your Tailwind config's plugins section. Currently the plugin doesn't offer any configuration.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  variants: {
    extend: {
      float: ['responsive', 'rtl'],
      margin: ['responsive', 'rtl'],
      padding: ['responsive', 'rtl'],
    },
  },
  plugins: [
    plugin(require('tailwindcss-plugin-rtl'))
  ]
}

Usage

<div class="text-green text-2xl pl-4 rtl:pr-4 rtl:pl-0">
    Hello World.
</div>