Have ideas to improve npm?Join in the discussion! »

    tailwindcss-dir

    4.0.0 • Public • Published

    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.

    Keywords

    none

    Install

    npm i tailwindcss-dir

    DownloadsWeekly Downloads

    6,567

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    124 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar