@@ -22,9 +22,6 @@ Then add the plugin to your tailwind.config.js file and do your settings if you'
22
22
23
23
// tailwind.config.js
24
24
module .exports = {
25
- theme: {
26
- // ...
27
- },
28
25
// You can disable the fontSize core plugin if you don't need the defaults.
29
26
// If you don't disable it, the fluid-type plugin simply overrule the defaults.
30
27
// Or you can use both alongside when you set an prefix in the settings
@@ -60,8 +57,8 @@ As default, we use `rem` for better accessibility, but you can also use `px`.
60
57
``` js
61
58
// tailwind.config.js
62
59
module .exports = {
63
- theme : {
64
- fluidType : {
60
+ plugins : [
61
+ require ( ' tailwindcss-fluid-type ' )( {
65
62
// your fluid type settings
66
63
// works only with unitless numbers
67
64
// This numbers are the defaults settings
@@ -92,9 +89,9 @@ module.exports = {
92
89
' 7xl' : [8 , 1 ],
93
90
' 8xl' : [9 , 1 ],
94
91
' 9xl' : [10 , 1 ],
95
- }
96
- },
97
- } ,
92
+ },
93
+ }) ,
94
+ ] ,
98
95
variants: {
99
96
fluidType: [' responsive' ]
100
97
}
@@ -108,15 +105,15 @@ It is also possible to set just the `fontSize` without set the `lineHeight`
108
105
``` js
109
106
// tailwind.config.js
110
107
module .exports = {
111
- theme : {
112
- fluidType : {
108
+ plugins : [
109
+ require ( ' tailwindcss-fluid-type ' )( {
113
110
values: {
114
111
// ...
115
112
' base' : 0 ,
116
113
// ...
117
114
}
118
- }
119
- }
115
+ }),
116
+ ]
120
117
};
121
118
```
122
119
@@ -128,8 +125,8 @@ documentation. `letterSpacing` can be all values that you like.
128
125
``` js
129
126
// tailwind.config.js
130
127
module .exports = {
131
- theme : {
132
- fluidType : {
128
+ plugins : [
129
+ require ( ' tailwindcss-fluid-type ' )( {
133
130
values: {
134
131
// ...
135
132
' base' : [0 ,
@@ -140,8 +137,8 @@ module.exports = {
140
137
],
141
138
// ...
142
139
}
143
- }
144
- }
140
+ }),
141
+ ]
145
142
};
146
143
```
147
144
@@ -152,8 +149,8 @@ module.exports = {
152
149
``` js
153
150
// tailwind.config.js
154
151
module .exports = {
155
- theme : {
156
- fluidType : {
152
+ plugins : [
153
+ require ( ' tailwindcss-fluid-type ' )( {
157
154
settings: {
158
155
fontSizeMin: 1.125 ,
159
156
fontSizeMax: 1.25 ,
@@ -169,8 +166,8 @@ module.exports = {
169
166
' base' : 0 ,
170
167
// ...
171
168
}
172
- }
173
- }
169
+ }),
170
+ ]
174
171
};
175
172
```
176
173
@@ -189,8 +186,8 @@ module.exports = {
189
186
``` js
190
187
// tailwind.config.js
191
188
module .exports = {
192
- theme : {
193
- fluidType : {
189
+ plugins : [
190
+ require ( ' tailwindcss-fluid-type ' )( {
194
191
settings: {
195
192
fontSizeMin: 1.125 ,
196
193
fontSizeMax: 1.25 ,
@@ -199,15 +196,15 @@ module.exports = {
199
196
screenMin: 20 ,
200
197
screenMax: 96 ,
201
198
unit: ' rem' ,
202
- prefix: ' '
199
+ prefix: ' '
203
200
},
204
201
values: {
205
202
// ...
206
203
' base' : [0 , 1.6 ],
207
204
// ...
208
205
}
209
- }
210
- }
206
+ }),
207
+ ]
211
208
};
212
209
```
213
210
@@ -227,8 +224,8 @@ module.exports = {
227
224
``` js
228
225
// tailwind.config.js
229
226
module .exports = {
230
- theme : {
231
- fluidType : {
227
+ plugins : [
228
+ require ( ' tailwindcss-fluid-type ' )( {
232
229
settings: {
233
230
fontSizeMin: 1.125 ,
234
231
fontSizeMax: 1.25 ,
@@ -247,8 +244,8 @@ module.exports = {
247
244
}],
248
245
// ...
249
246
}
250
- }
251
- }
247
+ }),
248
+ ]
252
249
};
253
250
```
254
251
@@ -268,17 +265,15 @@ module.exports = {
268
265
``` js
269
266
// tailwind.config.js
270
267
module .exports = {
271
- theme: {
272
- extend: {
273
- fluidType: {
274
- values: {
275
- // ...
276
- ' 2xs' : ' 11px' ,
277
- // ...
278
- }
268
+ plugins: [
269
+ require (' tailwindcss-fluid-type' )({
270
+ values: {
271
+ // ...
272
+ ' 2xs' : ' 11px' ,
273
+ // ...
279
274
}
280
- }
281
- }
275
+ }),
276
+ ]
282
277
};
283
278
```
284
279
@@ -297,16 +292,14 @@ module.exports = {
297
292
``` js
298
293
// tailwind.config.js
299
294
module .exports = {
300
- theme: {
301
- extend: {
302
- fluidType: {
303
- settings: {
304
- // ...
305
- prefix: ' fluid-' ,
306
- },
307
- }
308
- }
309
- }
295
+ plugins: [
296
+ require (' tailwindcss-fluid-type' )({
297
+ settings: {
298
+ // ...
299
+ prefix: ' fluid-' ,
300
+ },
301
+ }),
302
+ ]
310
303
};
311
304
```
312
305
0 commit comments