1.2.0 • Published 3 years ago
tailwindcss-plugin-rtl v1.2.0
Tailwind RTL - Plugin
Tailwind RTL plugin adds a custom rtl
variant and utilities to your tailwind project,
letting you have to 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: {
margin: ['responsive', 'rtl'],
padding: ['responsive', 'rtl'],
},
},
plugins: [
plugin(require('tailwindcss-plugin-rtl'))
]
}
Usage
<div class="fixed left-20 right-20">
<p class="float-left rtl:float-right pl-4 rtl:pr-4 rtl:pl-unset">Hello World.</p>
</div>
Notes:
float
andclear
are supported by utilities.left
andright
positioned elements support built-in RTL. reference
Utilities
Class | CSS |
---|---|
rtl:mr-unset | margin-right: unset !important |
rtl:ml-unset | margin-left: unset !important |
rtl:pr-unset | padding-right: unset !important |
rtl:pl-unset | padding-left: unset !important |
rtl:float-right | float: right !important |
rtl:float-left | float: left !important |
rtl:clear-right | clear: right !important |
rtl:clear-left | clear: left !important |