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
@@ -64,121 +70,167 @@ The plugin has several adjustable options.
64
70
65
71
### Theme Configuration
66
72
67
-
By default
73
+
The plugin uses [`fontSize` and `lineHeight` core plugins](https://tailwindcss.com/docs/configuration#core-plugins) to generate proper font sizes for Inter Typeface. Additionally it uses `interFontFeatures` to config font feature settings.
74
+
75
+
```js
76
+
// tailwind.config.js
77
+
module.exports= {
78
+
theme: {
79
+
interFontFeatures: {
80
+
default: ['calt', 'liga', 'kern'],
81
+
numeric: ['tnum', 'salt', 'ss02']
82
+
},
83
+
extend: {
84
+
fontSize: {
85
+
'xs':'11px',
86
+
's':'13px',
87
+
'm':'17px',
88
+
'l':'28px',
89
+
'xl':'36px',
90
+
'2xl':'48px',
91
+
'3xl':'64px',
92
+
base:'16px',
93
+
},
94
+
lineHeight: {
95
+
'lg':'1.6',
96
+
'md':'1.33',
97
+
'sm':'1.25',
98
+
'xs':'1',
99
+
},
100
+
}
101
+
},
102
+
plugins: [
103
+
require('tailwindcss-font-inter')()
104
+
]
105
+
}
106
+
```
68
107
69
108
## Output
70
109
71
110
This package will generate CSS on components section and utilities section.
72
111
73
-
### On `components` Section
112
+
### Font Family
74
113
75
-
This will add some `@font-face` declaration and adding`.font-inter` class.
114
+
The plugin will add some `@font-face` declaration in base (if `importFontFace` option is set to `true`) and add`.font-inter` utility class.
76
115
77
116
```css
78
-
/*Will be generated on @tailwind components;*/
117
+
/*Just a copy of https://rsms.me/inter/inter.css*/
@@ -188,13 +240,13 @@ This will add some `@font-face` declaration and adding `.font-inter` class.
188
240
@supports(font-variation-settings:normal) {
189
241
.font-inter {
190
242
font-family: "Inter UI var", sans-serif;
191
-
}
243
+
}
192
244
}
193
245
```
194
246
195
-
## On `utilities` section
247
+
## Font Sizes
196
248
197
-
Replace standard `text-lg`into `text-inter-lg` to get **Dynamic Metrics** applied to your `text` class.
249
+
Alongside with the default `text-lg`classes, the plugin will generate `text-inter-lg` to set also line height and letter spacing according to Inter's **Dynamic Metrics**.
198
250
199
251
```css
200
252
/* Will be generated on @tailwind utilities; */
@@ -253,7 +305,59 @@ Replace standard `text-lg` into `text-inter-lg` to get **Dynamic Metrics** appli
253
305
line-height: 4.2rem;
254
306
}
255
307
```
308
+
### Font features
309
+
310
+
Also the plugin generates utility classes which allow you to specify named font feature settings.
311
+
312
+
```js
313
+
// tailwind.config.js
314
+
module.exports= {
315
+
theme: {
316
+
interFontFeatures: {
317
+
default: ['calt', 'liga', 'kern'],
318
+
numeric: ['tnum', 'salt', 'ss02']
319
+
},
320
+
},
321
+
plugins: [
322
+
require('tailwindcss-font-inter')()
323
+
]
324
+
}
325
+
```
326
+
327
+
This will generate the following classes:
328
+
329
+
```css
330
+
/* This is a default class */
331
+
.font-feature-normal: {
332
+
font-feature-settings: normal
333
+
}
334
+
335
+
.font-feature-default: {
336
+
font-feature-settings: "calt", "liga", "kern";
337
+
}
256
338
339
+
.font-feature-numeric: {
340
+
font-feature-settings: "tnum", "salt", "ss02";
341
+
}
257
342
```
258
343
344
+
The plugin will filter unsupported feature and won't include it to the output. Also to avoid some unexpected inheritance, you can set plugin's option `disableUnusedFeatures` to `true`, then generated classes will disable all supported featurs and enable only those you've specified.
0 commit comments