Skip to content

Commit adf1030

Browse files
authored
Update README.md
1 parent e669b6f commit adf1030

File tree

1 file changed

+6
-22
lines changed

1 file changed

+6
-22
lines changed

README.md

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@
77
This plugin generates RFS variants of Tailwind utility classes.
88

99
## Requirements
10+
1011
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.
1112

1213
## Installation
14+
1315
```
1416
npm install tailwindcss-rfs
1517
```
1618

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

2021
```js
@@ -25,29 +26,12 @@ module.exports = {
2526
}
2627
```
2728

28-
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:
29-
30-
```js
31-
// tailwind.config.js
32-
33-
module.exports = {
34-
variants: {
35-
extend: {
36-
fontSize: ['rfs'],
37-
padding: ['rfs'],
38-
margin: ['rfs'],
39-
gap: ['rfs'],
40-
},
41-
},
42-
plugins: [
43-
require('tailwindcss-rfs')
44-
],
45-
}
46-
```
29+
## Usage
4730

48-
Simply apply the `rfs` variant to any sizing utility. This will pass utility's value to the `rfs()` function and output the processed value.
31+
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.
4932

5033
**Template:**
34+
5135
```html
5236
<div class="rfs:p-24">
5337
<p class="rfs:text-6xl">This text resizes magically!</p>
@@ -67,7 +51,7 @@ Simply apply the `rfs` variant to any sizing utility. This will pass utility's v
6751
}
6852
```
6953

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

7256
```html
7357
<div class="rfs:p-24 hover:rfs:p-20">

0 commit comments

Comments
 (0)