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
Then add the plugin to your tailwind.config.js file and do your settings if you're not happy with the defaults:
20
+
18
21
```js
19
22
20
23
// tailwind.config.js
21
24
module.exports= {
22
-
theme: {
23
-
// ...
24
-
},
25
-
// You have to disable the fontSize core
26
-
// plugins otherwise it doesn't work
27
-
corePlugins: {
28
-
fontSize:false,
29
-
// ...
30
-
},
31
-
plugins: [
32
-
require('tailwindcss-fluid-type'),
33
-
// ...
34
-
],
25
+
theme: {
26
+
// ...
27
+
},
28
+
// You have to disable the fontSize core
29
+
// plugins otherwise it doesn't work
30
+
corePlugins: {
31
+
fontSize:false,
32
+
// ...
33
+
},
34
+
plugins: [
35
+
require('tailwindcss-fluid-type'),
36
+
// ...
37
+
],
35
38
};
36
39
```
37
40
38
41
## 👉🏻 Usage
42
+
39
43
Nothing changed here to the default tailwindcss configuration:
44
+
40
45
```html
46
+
41
47
<article>
42
-
<h1class="text-xl">Fluid type</h1>
48
+
<h1class="text-xl">Fluid type</h1>
43
49
</article>
44
50
```
45
51
46
52
## 👉🏻 Configuration
47
-
The plugin comes with a default configuration (see below) but it's possible to customize this config for your project. As default, we use `rem` for better accessibility, but you can also use `px`:
53
+
54
+
The plugin comes with a default configuration (see below) but it's possible to customize this config for your project.
55
+
As default, we use `rem` for better accessibility, but you can also use `px`.
56
+
57
+
### Default configuration
58
+
48
59
```js
49
60
// tailwind.config.js
50
61
module.exports= {
51
-
theme: {
52
-
// your fluid type settings
53
-
// works only with unitless numbers
54
-
// This numbers are the defaults settings
55
-
fluidTypeSettings: {
56
-
fontSizeMin:1.125, // 1.125rem === 18px
57
-
fontSizeMax:1.25, // 1.25rem === 20px
58
-
ratioMin:1.125, // Multiplicator Min
59
-
ratioMax:1.2, // Multiplicator Max
60
-
screenMin:20, // 20rem === 320px
61
-
screenMax:96, // 96rem === 1536px
62
-
unit:'rem'// default is rem but it's also possible to use 'px'
62
+
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.
78
+
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],
92
+
},
63
93
},
64
-
// Creates the text-xx classes
65
-
// This are the default settings and analog to the tailwindcss defaults
66
-
// The values should be integer numbers
67
-
fluidType: {
68
-
'xs':-2,
69
-
'sm':-1,
70
-
'base':0,
71
-
'lg':1,
72
-
'xl':2,
73
-
'2xl':3,
74
-
'3xl':4,
75
-
'4xl':5,
76
-
'5xl':6,
77
-
'6xl':7,
78
-
'7xl':8,
79
-
'8xl':9,
80
-
'9xl':10,
81
-
},
82
-
},
83
-
variants: {
84
-
fluidType: ['responsive']
85
-
}
94
+
variants: {
95
+
fluidType: ['responsive']
96
+
}
86
97
};
87
98
```
99
+
100
+
### Fluid type configuration without `lineHeight`
101
+
102
+
It is also possible to set just the `fontSize` without set the `lineHeight`
103
+
104
+
```js
105
+
// tailwind.config.js
106
+
module.exports= {
107
+
theme: {
108
+
fluidType: {
109
+
// ...
110
+
'base':0,
111
+
// ...
112
+
}
113
+
}
114
+
};
115
+
```
116
+
117
+
### Fluid type configuration with `lineHeight` & `letterSpacing`
118
+
119
+
And yes, you can also set the `letterSpacing` & `lineHeight` as you know from the tailwind
120
+
documentation. `letterSpacing` can be all values that you like.
121
+
122
+
```js
123
+
// tailwind.config.js
124
+
module.exports= {
125
+
theme: {
126
+
fluidType: {
127
+
// ...
128
+
'base': [0,
129
+
{
130
+
lineHeight:1.6,
131
+
letterSpacing:'-0.1rem',
132
+
}
133
+
],
134
+
// ...
135
+
}
136
+
}
137
+
};
138
+
```
139
+
140
+
## 👉🏻 Samples
141
+
142
+
### Just set the `fontSize` property
143
+
144
+
```js
145
+
// tailwind.config.js
146
+
module.exports= {
147
+
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
+
},
157
+
fluidType: {
158
+
// ...
159
+
'base':0,
160
+
// ...
161
+
}
162
+
}
163
+
};
164
+
```
165
+
166
+
```html
167
+
<pclass="text-base">The quick brown fox jumps over the lazy dogs</p>
0 commit comments