Wondering what’s next for npm?Check out our public roadmap! »

    @abdulkaderptp/tailwind-rtl

    1.0.3 • Public • Published

    Tailwind RTL CSS Plugin

    This package is a fork of murtazasultani/tailwind-rtl.

    Tailwind CSS plugin to generate RTL variants.

    Installation

    yarn add @abdulkaderptp/tailwind-rtl -D
    
    or
    
    npm install @abdulkaderptp/tailwind-rtl --save-dev

    Usage

    With Default prefix html:lang(ar)

    RTL styles will be applied when you have lang="ar" attribute in html

    <html lang="ar">
    ...
    ...
    
    plugins: [
        require('@abdulkaderptp/tailwind-rtl')(),
        // ...
    ],

    With Custom prefix

    If you want to change when to apply RTL instead of applying based on html:lang(ar)

    Eg:

    ...
    <body dir="rtl">
    ...
    
    plugins: [
        require('@abdulkaderptp/tailwind-rtl')({selectorPrefix: '[dir="rtl"]'}),
        // ...
    ],

    Note

    By default the rtl variant is not enabled to none of the tailwindcss utilities. To use the rtl variant add it at the end of any utility you want to use it with.

    variants: {
        margin: ['responsive', 'rtl'],
        padding: ['responsive', 'rtl'],
        textAlign: ['responsive', 'rtl']
        // ...
    },

    This plugin generates the following utilities:

    /* default prefix */
    
    html:lang(ar) .rtl\:text-2xl {
      font-size: 1.5rem;
      line-height: 2rem;
    }
    
    /* with custom prefix */
    
    [dir='rtl'] .rtl\:text-2xl {
      font-size: 1.5rem;
      line-height: 2rem;
    }
    [dir='rtl'] .rtl\:ml-5 {
      margin-left: 1.25rem;
    }
    ...

    Example

    <div class="ml-10 text-xs rtl:text-2xl rtl:ml-5 text-left rtl:text-right md:rtl:text-center">
      My App
    </div>

    Install

    npm i @abdulkaderptp/tailwind-rtl

    DownloadsWeekly Downloads

    36

    Version

    1.0.3

    License

    ISC

    Unpacked Size

    4.69 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar