tailwindcss-rfs

    4.0.0 • Public • Published

    GitHub release (latest by date) npm GitHub

    RFS Plugin for Tailwind CSS

    This plugin generates RFS variants of Tailwind utility classes.

    Requirements

    This plugin requires a working PostCSS setup of the RFS PostCSS plugin. You can check out the webpack.mix.js file for a working setup using Laravel Mix.

    Installation

    npm install tailwindcss-rfs
    

    Usage

    1. Add tailwindcss-rfs to the plugins array of your Tailwind config
    2. Add the rfs variant to any utility you want
    // tailwind.config.js
    
    module.exports = {
        variants: {
            extend: {
                fontSize: ['rfs'],
                padding: ['rfs'],
                margin: ['rfs'],
                gap: ['rfs'],
            },
        },
        plugins: [
            require('tailwindcss-rfs')
        ],
    }

    Example Output

    /* Original */
    
    .text-6xl {
      font-size: 3.75rem;
      line-height: 1;
    }
    
    .p-24 {
      padding: 6rem;
    }
    
    
    /* RFS Variant */
    
    .rfs\:text-6xl {
      font-size: calc(1.5rem + 3vw);
      line-height: 1;
    }
    
    .rfs\:p-24 {
      padding: calc(1.725rem + 5.7vw);
    }

    Install

    npm i tailwindcss-rfs

    DownloadsWeekly Downloads

    104

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    5.56 MB

    Total Files

    11

    Last publish

    Collaborators

    • aerni