Skip to content

Commit 2c2c63a

Browse files
Merge pull request #13 from davidhellmann/v2
🔖 release: v2
2 parents 6f4c367 + 39b076f commit 2c2c63a

File tree

9 files changed

+473
-574
lines changed

9 files changed

+473
-574
lines changed

README.md

Lines changed: 42 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,6 @@ Then add the plugin to your tailwind.config.js file and do your settings if you'
2222

2323
// tailwind.config.js
2424
module.exports = {
25-
theme: {
26-
// ...
27-
},
2825
// You can disable the fontSize core plugin if you don't need the defaults.
2926
// If you don't disable it, the fluid-type plugin simply overrule the defaults.
3027
// 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`.
6057
```js
6158
// tailwind.config.js
6259
module.exports = {
63-
theme: {
64-
fluidType: {
60+
plugins: [
61+
require('tailwindcss-fluid-type')({
6562
// your fluid type settings
6663
// works only with unitless numbers
6764
// This numbers are the defaults settings
@@ -92,9 +89,9 @@ module.exports = {
9289
'7xl': [8, 1],
9390
'8xl': [9, 1],
9491
'9xl': [10, 1],
95-
}
96-
},
97-
},
92+
},
93+
}),
94+
],
9895
variants: {
9996
fluidType: ['responsive']
10097
}
@@ -108,15 +105,15 @@ It is also possible to set just the `fontSize` without set the `lineHeight`
108105
```js
109106
// tailwind.config.js
110107
module.exports = {
111-
theme: {
112-
fluidType: {
108+
plugins: [
109+
require('tailwindcss-fluid-type')({
113110
values: {
114111
// ...
115112
'base': 0,
116113
// ...
117114
}
118-
}
119-
}
115+
}),
116+
]
120117
};
121118
```
122119

@@ -128,8 +125,8 @@ documentation. `letterSpacing` can be all values that you like.
128125
```js
129126
// tailwind.config.js
130127
module.exports = {
131-
theme: {
132-
fluidType: {
128+
plugins: [
129+
require('tailwindcss-fluid-type')({
133130
values: {
134131
// ...
135132
'base': [0,
@@ -140,8 +137,8 @@ module.exports = {
140137
],
141138
// ...
142139
}
143-
}
144-
}
140+
}),
141+
]
145142
};
146143
```
147144

@@ -152,8 +149,8 @@ module.exports = {
152149
```js
153150
// tailwind.config.js
154151
module.exports = {
155-
theme: {
156-
fluidType: {
152+
plugins: [
153+
require('tailwindcss-fluid-type')({
157154
settings: {
158155
fontSizeMin: 1.125,
159156
fontSizeMax: 1.25,
@@ -169,8 +166,8 @@ module.exports = {
169166
'base': 0,
170167
// ...
171168
}
172-
}
173-
}
169+
}),
170+
]
174171
};
175172
```
176173

@@ -189,8 +186,8 @@ module.exports = {
189186
```js
190187
// tailwind.config.js
191188
module.exports = {
192-
theme: {
193-
fluidType: {
189+
plugins: [
190+
require('tailwindcss-fluid-type')({
194191
settings: {
195192
fontSizeMin: 1.125,
196193
fontSizeMax: 1.25,
@@ -199,15 +196,15 @@ module.exports = {
199196
screenMin: 20,
200197
screenMax: 96,
201198
unit: 'rem',
202-
prefix: ''
199+
prefix: ''
203200
},
204201
values: {
205202
// ...
206203
'base': [0, 1.6],
207204
// ...
208205
}
209-
}
210-
}
206+
}),
207+
]
211208
};
212209
```
213210

@@ -227,8 +224,8 @@ module.exports = {
227224
```js
228225
// tailwind.config.js
229226
module.exports = {
230-
theme: {
231-
fluidType: {
227+
plugins: [
228+
require('tailwindcss-fluid-type')({
232229
settings: {
233230
fontSizeMin: 1.125,
234231
fontSizeMax: 1.25,
@@ -247,8 +244,8 @@ module.exports = {
247244
}],
248245
// ...
249246
}
250-
}
251-
}
247+
}),
248+
]
252249
};
253250
```
254251

@@ -268,17 +265,15 @@ module.exports = {
268265
```js
269266
// tailwind.config.js
270267
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+
// ...
279274
}
280-
}
281-
}
275+
}),
276+
]
282277
};
283278
```
284279

@@ -297,16 +292,14 @@ module.exports = {
297292
```js
298293
// tailwind.config.js
299294
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+
]
310303
};
311304
```
312305

0 commit comments

Comments
 (0)