Skip to content

Commit 0dbaa7c

Browse files
davidhellmanndavidhellmann
committed
Add more config possibilities
- prefix - extending - overwriting
1 parent 360a4b0 commit 0dbaa7c

File tree

3 files changed

+177
-117
lines changed

3 files changed

+177
-117
lines changed

‎README.md‎

Lines changed: 129 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,9 @@ module.exports = {
2525
theme: {
2626
// ...
2727
},
28-
// You have to disable the fontSize core
29-
// plugins otherwise it doesn't work
28+
// You can disable the fontSize core plugin if you don't need the defaults.
29+
// If you don't disable it, the fluid-type plugin simply overrule the defaults.
30+
// Or you can use both alongside when you set an prefix in the settings
3031
corePlugins: {
3132
fontSize: false,
3233
// ...
@@ -60,35 +61,38 @@ As default, we use `rem` for better accessibility, but you can also use `px`.
6061
// tailwind.config.js
6162
module.exports = {
6263
theme: {
63-
// your fluid type settings
64-
// works only with unitless numbers
65-
// This numbers are the defaults settings
66-
fluidTypeSettings: {
67-
fontSizeMin: 1.125, // 1.125rem === 18px
68-
fontSizeMax: 1.25, // 1.25rem === 20px
69-
ratioMin: 1.125, // Multiplicator Min
70-
ratioMax: 1.2, // Multiplicator Max
71-
screenMin: 20, // 20rem === 320px
72-
screenMax: 96, // 96rem === 1536px
73-
unit: 'rem' // default is rem but it's also possible to use 'px'
74-
},
75-
// Creates the text-xx classes
76-
// This are the default settings and analog to the tailwindcss defaults
77-
// Each `lineHeight` is set unitless and we think that's the way to go especially in context with fluid type.
7864
fluidType: {
79-
'xs': [-2, 1.6],
80-
'sm': [-1, 1.6],
81-
'base': [0, 1.6],
82-
'lg': [1, 1.6],
83-
'xl': [2, 1.2],
84-
'2xl': [3, 1.2],
85-
'3xl': [4, 1.2],
86-
'4xl': [5, 1.1],
87-
'5xl': [6, 1.1],
88-
'6xl': [7, 1.1],
89-
'7xl': [8, 1],
90-
'8xl': [9, 1],
91-
'9xl': [10, 1],
65+
// your fluid type settings
66+
// works only with unitless numbers
67+
// This numbers are the defaults settings
68+
settings: {
69+
fontSizeMin: 1.125, // 1.125rem === 18px
70+
fontSizeMax: 1.25, // 1.25rem === 20px
71+
ratioMin: 1.125, // Multiplicator Min
72+
ratioMax: 1.2, // Multiplicator Max
73+
screenMin: 20, // 20rem === 320px
74+
screenMax: 96, // 96rem === 1536px
75+
unit: 'rem', // default is rem but it's also possible to use 'px'
76+
prefix: '' // set a prefix to use it alongside the default font sizes
77+
},
78+
// Creates the text-xx classes
79+
// This are the default settings and analog to the tailwindcss defaults
80+
// Each `lineHeight` is set unitless and we think that's the way to go especially in context with fluid type.
81+
values: {
82+
'xs': [-2, 1.6],
83+
'sm': [-1, 1.6],
84+
'base': [0, 1.6],
85+
'lg': [1, 1.6],
86+
'xl': [2, 1.2],
87+
'2xl': [3, 1.2],
88+
'3xl': [4, 1.2],
89+
'4xl': [5, 1.1],
90+
'5xl': [6, 1.1],
91+
'6xl': [7, 1.1],
92+
'7xl': [8, 1],
93+
'8xl': [9, 1],
94+
'9xl': [10, 1],
95+
}
9296
},
9397
},
9498
variants: {
@@ -106,9 +110,11 @@ It is also possible to set just the `fontSize` without set the `lineHeight`
106110
module.exports = {
107111
theme: {
108112
fluidType: {
109-
// ...
110-
'base': 0,
111-
// ...
113+
values: {
114+
// ...
115+
'base': 0,
116+
// ...
117+
}
112118
}
113119
}
114120
};
@@ -124,14 +130,16 @@ documentation. `letterSpacing` can be all values that you like.
124130
module.exports = {
125131
theme: {
126132
fluidType: {
127-
// ...
128-
'base': [0,
129-
{
130-
lineHeight: 1.6,
131-
letterSpacing: '-0.1rem',
132-
}
133-
],
134-
// ...
133+
values: {
134+
// ...
135+
'base': [0,
136+
{
137+
lineHeight: 1.6,
138+
letterSpacing: '-0.1rem',
139+
}
140+
],
141+
// ...
142+
}
135143
}
136144
}
137145
};
@@ -145,19 +153,22 @@ module.exports = {
145153
// tailwind.config.js
146154
module.exports = {
147155
theme: {
148-
fluidTypeSettings: {
149-
fontSizeMin: 1.125,
150-
fontSizeMax: 1.25,
151-
ratioMin: 1.125,
152-
ratioMax: 1.2,
153-
screenMin: 20,
154-
screenMax: 96,
155-
unit: 'rem'
156-
},
157156
fluidType: {
158-
// ...
159-
'base': 0,
160-
// ...
157+
settings: {
158+
fontSizeMin: 1.125,
159+
fontSizeMax: 1.25,
160+
ratioMin: 1.125,
161+
ratioMax: 1.2,
162+
screenMin: 20,
163+
screenMax: 96,
164+
unit: 'rem',
165+
prefix: ''
166+
},
167+
values: {
168+
// ...
169+
'base': 0,
170+
// ...
171+
}
161172
}
162173
}
163174
};
@@ -179,19 +190,22 @@ module.exports = {
179190
// tailwind.config.js
180191
module.exports = {
181192
theme: {
182-
fluidTypeSettings: {
183-
fontSizeMin: 1.125,
184-
fontSizeMax: 1.25,
185-
ratioMin: 1.125,
186-
ratioMax: 1.2,
187-
screenMin: 20,
188-
screenMax: 96,
189-
unit: 'rem'
190-
},
191193
fluidType: {
192-
// ...
193-
'base': [0, 1.6],
194-
// ...
194+
settings: {
195+
fontSizeMin: 1.125,
196+
fontSizeMax: 1.25,
197+
ratioMin: 1.125,
198+
ratioMax: 1.2,
199+
screenMin: 20,
200+
screenMax: 96,
201+
unit: 'rem',
202+
prefix: ''
203+
},
204+
values: {
205+
// ...
206+
'base': [0, 1.6],
207+
// ...
208+
}
195209
}
196210
}
197211
};
@@ -214,22 +228,25 @@ module.exports = {
214228
// tailwind.config.js
215229
module.exports = {
216230
theme: {
217-
fluidTypeSettings: {
218-
fontSizeMin: 1.125,
219-
fontSizeMax: 1.25,
220-
ratioMin: 1.125,
221-
ratioMax: 1.2,
222-
screenMin: 20,
223-
screenMax: 96,
224-
unit: 'rem'
225-
},
226231
fluidType: {
227-
// ...
228-
'base': [0, {
229-
lineHeight: 1.6,
230-
letterSpacing: '-0.1rem',
231-
}],
232-
// ...
232+
settings: {
233+
fontSizeMin: 1.125,
234+
fontSizeMax: 1.25,
235+
ratioMin: 1.125,
236+
ratioMax: 1.2,
237+
screenMin: 20,
238+
screenMax: 96,
239+
unit: 'rem',
240+
prefix: '',
241+
},
242+
values: {
243+
// ...
244+
'base': [0, {
245+
lineHeight: 1.6,
246+
letterSpacing: '-0.1rem',
247+
}],
248+
// ...
249+
}
233250
}
234251
}
235252
};
@@ -247,5 +264,36 @@ module.exports = {
247264
}
248265
```
249266

267+
### Set a prefix
268+
269+
```js
270+
// tailwind.config.js
271+
module.exports = {
272+
theme: {
273+
extend: {
274+
fluidType: {
275+
settings: {
276+
// ...
277+
prefix: 'fluid-',
278+
},
279+
}
280+
}
281+
}
282+
};
283+
```
284+
285+
```html
286+
<p class="fluid-text-base">The quick brown fox jumps over the lazy dogs</p>
287+
```
288+
289+
```css
290+
.fluid-text-base {
291+
font-size: clamp(1.125rem, calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))), 1.25rem);
292+
line-height: 1.6;
293+
letter-spacing: -0.1rem;
294+
}
295+
```
296+
297+
250298
## 👉🏻 Live Demo
251-
[Fluid Type Live Demo](https://play.tailwindcss.com/vxnQwJvrQA)
299+
[Fluid Type Live Demo](https://play.tailwindcss.com/3LDf3gzbhb)

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "tailwindcss-fluid-type",
3-
"version": "1.2.2",
3+
"version": "1.3.0",
44
"description": "Bring fluid type to tailwindcss",
55
"main": "src/index.js",
66
"license": "MIT",

‎src/index.js‎

Lines changed: 47 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,56 @@
11
const plugin = require('tailwindcss/plugin')
2+
// Defaults
3+
const DEFAULT_SETTINGS = {
4+
fontSizeMin: 1.125,
5+
fontSizeMax: 1.25,
6+
ratioMin: 1.125,
7+
ratioMax: 1.2,
8+
screenMin: 20,
9+
screenMax: 96,
10+
unit: 'rem',
11+
prefix: '',
12+
}
13+
const DEFAULT_VALUES = {
14+
'xs': [-2, 1.6],
15+
'sm': [-1, 1.6],
16+
'base': [0, 1.6],
17+
'lg': [1, 1.6],
18+
'xl': [2, 1.2],
19+
'2xl': [3, 1.2],
20+
'3xl': [4, 1.2],
21+
'4xl': [5, 1.1],
22+
'5xl': [6, 1.1],
23+
'6xl': [7, 1.1],
24+
'7xl': [8, 1],
25+
'8xl': [9, 1],
26+
'9xl': [10, 1],
27+
}
28+
const DEFAULT_VARIANTS = ['responsive']
229

330
module.exports = plugin(
431
function ({addUtilities, theme, variants, e}) {
5-
const values = theme('fluidType');
6-
const settingsAsArray = Object.entries(theme('fluidTypeSettings'));
7-
const settingsAsArrayFiltered = settingsAsArray.filter(([key, value]) => key !== 'unit');
32+
const values = theme('fluidType.values', DEFAULT_VALUES);
33+
const prefix = theme('fluidType.settings.prefix', DEFAULT_SETTINGS.prefix);
34+
const settingsAsArray = Object.entries(theme('fluidType.settings', DEFAULT_SETTINGS));
35+
const settingsAsArrayFiltered = settingsAsArray
36+
.filter(([key, value]) => key !== 'unit')
37+
.filter(([key, value]) => key !== 'prefix');
838
const finalSettings = Object.fromEntries(settingsAsArrayFiltered);
939
const settingsAreNumbers = Object
1040
.values(finalSettings)
1141
.every(value => typeof value === 'number')
1242

1343
const calcModularScale = (value = 0) => {
1444
if (settingsAreNumbers) {
15-
const sFtMin = theme('fluidTypeSettings.fontSizeMin');
16-
const sFtMax = theme('fluidTypeSettings.fontSizeMax');
17-
const sFtRMin = theme('fluidTypeSettings.ratioMin');
18-
const sFtRMax = theme('fluidTypeSettings.ratioMax');
19-
const sFtSMin = theme('fluidTypeSettings.screenMin');
20-
const sFtSMax = theme('fluidTypeSettings.screenMax');
21-
const sFtUnit = typeof theme('fluidTypeSettings.unit') === 'string' ? theme('fluidTypeSettings.unit') : 'rem';
45+
const sFtMin = theme('fluidType.settings.fontSizeMin', DEFAULT_SETTINGS.fontSizeMin);
46+
const sFtMax = theme('fluidType.settings.fontSizeMax', DEFAULT_SETTINGS.fontSizeMax);
47+
const sFtRMin = theme('fluidType.settings.ratioMin', DEFAULT_SETTINGS.ratioMin);
48+
const sFtRMax = theme('fluidType.settings.ratioMax', DEFAULT_SETTINGS.ratioMax);
49+
const sFtSMin = theme('fluidType.settings.screenMin', DEFAULT_SETTINGS.screenMin);
50+
const sFtSMax = theme('fluidType.settings.screenMax', DEFAULT_SETTINGS.screenMax);
51+
const sFtUnit = typeof theme('fluidType.settings.unit', DEFAULT_SETTINGS.unit) === 'string'
52+
? theme('fluidType.settings.unit', DEFAULT_SETTINGS.unit)
53+
: 'rem';
2254
const ftMin = sFtMin * Math.pow(sFtRMin, value);
2355
const ftMax = sFtMax * Math.pow(sFtRMax, value);
2456
return `clamp(${ftMin}${sFtUnit},
@@ -66,42 +98,22 @@ module.exports = plugin(
6698
}
6799

68100
return {
69-
[`.${e(`text-${key}`)}`]: output,
101+
[`.${e(`${prefix}text-${key}`)}`]: output,
70102
}
71103
}),
72104
],
73-
variants('fluidType')
105+
variants('fluidType', DEFAULT_VARIANTS)
74106
)
75107
},
76108
{
77109
theme: {
78-
fluidTypeSettings: {
79-
fontSizeMin: 1.125,
80-
fontSizeMax: 1.25,
81-
ratioMin: 1.125,
82-
ratioMax: 1.2,
83-
screenMin: 20,
84-
screenMax: 96,
85-
unit: 'rem'
86-
},
87110
fluidType: {
88-
'xs': [-2, 1.6],
89-
'sm': [-1, 1.6],
90-
'base': [0, 1.6],
91-
'lg': [1, 1.6],
92-
'xl': [2, 1.2],
93-
'2xl': [3, 1.2],
94-
'3xl': [4, 1.2],
95-
'4xl': [5, 1.1],
96-
'5xl': [6, 1.1],
97-
'6xl': [7, 1.1],
98-
'7xl': [8, 1],
99-
'8xl': [9, 1],
100-
'9xl': [10, 1],
111+
settings: DEFAULT_SETTINGS,
112+
values: DEFAULT_VALUES
101113
},
102114
},
103115
variants: {
104-
fluidType: ['responsive'],
116+
fluidType: DEFAULT_VARIANTS,
105117
},
106118
}
107119
)

0 commit comments

Comments
 (0)