You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+6-22Lines changed: 6 additions & 22 deletions
Original file line number
Diff line number
Diff line change
@@ -7,14 +7,15 @@
7
7
This plugin generates RFS variants of Tailwind utility classes.
8
8
9
9
## Requirements
10
+
10
11
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.
11
12
12
13
## Installation
14
+
13
15
```
14
16
npm install tailwindcss-rfs
15
17
```
16
18
17
-
## Usage
18
19
Add `tailwindcss-rfs` to the plugins array of your Tailwind config:
19
20
20
21
```js
@@ -25,29 +26,12 @@ module.exports = {
25
26
}
26
27
```
27
28
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
47
30
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.
49
32
50
33
**Template:**
34
+
51
35
```html
52
36
<divclass="rfs:p-24">
53
37
<pclass="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
67
51
}
68
52
```
69
53
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`:
0 commit comments