https://github.com/aerni/tailwindcss-rfs

This is a Tailwind CSS plugin to generate utility classes for RFS
https://github.com/aerni/tailwindcss-rfs

rfs tailwind tailwindcss tailwindcss-plugin

Last synced: 3 days ago
JSON representation

This is a Tailwind CSS plugin to generate utility classes for RFS

• Host: GitHub
• URL: https://github.com/aerni/tailwindcss-rfs
• Owner: aerni
• License: mit
• Created: 2019-07-09T15:19:54.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-14T09:03:41.000Z (4 months ago)
• Last Synced: 2024-10-12T18:54:42.148Z (3 months ago)
• Topics: rfs, tailwind, tailwindcss, tailwindcss-plugin
• Language: HTML
• Homepage:
• Size: 2.03 MB
• Stars: 59
• Watchers: 2
• Forks: 3
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-tailwindcss - RFS - Adds [`RFS`](https://github.com/twbs/rfs) utilities. (Plugins)

README

        
![GitHub release (latest by date)](https://img.shields.io/github/v/release/aerni/tailwindcss-rfs?style=flat-square)

![npm](https://img.shields.io/npm/dt/tailwindcss-rfs?style=flat-square)

![GitHub](https://img.shields.io/github/license/aerni/tailwindcss-rfs?style=flat-square)

# 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](https://github.com/twbs/rfs). You can check out the `webpack.mix.js` file for a working setup using Laravel Mix.

## Installation

```

npm install tailwindcss-rfs

```

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

```js

module.exports = {

    plugins: [

        require('tailwindcss-rfs')

    ],

}

```

## Usage

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

**Template:**

```html



    
This text resizes magically!



```


**Output:**

```css

.rfs\:text-6xl {

  font-size: calc(1.5rem + 3vw);

  line-height: 1;

}

.rfs\:p-24 {

  padding: calc(1.725rem + 5.7vw);

}

```

You can also stack the `rfs` variant with other variants like `hover`:

```html



    
This text resizes magically!



```