Skip to content

Upgrade to RFS v10.0.0 #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 3, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 6 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@
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
```

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

```js
Expand All @@ -25,29 +26,12 @@ module.exports = {
}
```

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:

```js
// tailwind.config.js

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

Simply apply the `rfs` variant to any sizing utility. This will pass utility's value to the `rfs()` function and output the processed value.
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
<div class="rfs:p-24">
<p class="rfs:text-6xl">This text resizes magically!</p>
Expand All @@ -67,7 +51,7 @@ Simply apply the `rfs` variant to any sizing utility. This will pass utility's v
}
```

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

```html
<div class="rfs:p-24 hover:rfs:p-20">
Expand Down
Loading