Package Exports

tailwindcss-rfs
tailwindcss-rfs/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-rfs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Add tailwindcss-rfs to the plugins array of your Tailwind config:

module.exports = {
    plugins: [
        require('tailwindcss-rfs')
    ],
}

If you are running a Tailwind CSS version lower than v3.0, you also have to add the rfs variant to the desired core plugins:

// tailwind.config.js

module.exports = {
    variants: {
        extend: {
            fontSize: ['rfs'],
            padding: ['rfs'],
            margin: ['rfs'],
            gap: ['rfs'],
        },
    },
    plugins: [
        require('tailwindcss-rfs')
    ],
}

Simply apply the rfs variant to any sizing utility. This will pass utility's value to the rfs() function and output the processed value.

Template:

<div class="rfs:p-24">
    <p class="rfs:text-6xl">This text resizes magically!</p>
</div>

Output:

.rfs\:text-6xl {
  font-size: calc(1.5rem + 3vw);
  line-height: 1;
}

.rfs\:p-24 {
  padding: calc(1.725rem + 5.7vw);
}

If you are on Tailwind CSS 3.0+ you may also stack the rfs variant with other variants like hover:

<div class="rfs:p-24 hover:rfs:p-20">
    <p class="rfs:text-6xl hover:rfs:text-5xl">This text resizes magically!</p>
</div>