Skip to content

Commit 1d8fadd

Browse files
semencovsemencov
authored
Merge pull request #15 from semencov/dev
v3
2 parents 859272d + 98fe167 commit 1d8fadd

File tree

8 files changed

+1025
-441
lines changed

8 files changed

+1025
-441
lines changed

‎CHANGELOG.md‎

Lines changed: 0 additions & 67 deletions
This file was deleted.

‎README.md‎

Lines changed: 83 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ TailwindCSS Plugin to integrate with Inter Typeface from Rasmus Andersson [@rsms
44

55
The plugin is inspired with [tailwind-plugin-inter-font](https://github.com/suburbicode/tailwind-plugin-font-inter) plugin developed by Imam Susanto [@imsus](https://github.com/imsus).
66

7+
:warning: **This plugin produces pretty large amount of utility classes! It is highly recommended to use it in JIT-mode or with `purge` option.**
8+
9+
710
## Installation
811

912
```sh
@@ -21,19 +24,17 @@ Add plugin to your `tailwind.config.js`:
2124
```js
2225
// tailwind.config.js
2326
module.exports = {
24-
theme: {
25-
extend: {}
26-
},
27-
variants: {},
28-
plugins: [require('tailwindcss-font-inter')()]
29-
};
27+
theme: {},
28+
variants: {},
29+
plugins: [require('tailwindcss-font-inter')]
30+
}
3031
```
3132

32-
Now you can put `.font-inter` class to apply the font (by default `@font-face` defenitions will be added to your CSS).
33+
Now you can put `.font-inter` class to apply the font (by default `@font-face` definitions will be added to your CSS).
3334

3435
```html
3536
<body class="font-inter text-base text-black bg-white antialiased font-feature-default">
36-
...
37+
...
3738
</body>
3839
```
3940

@@ -45,17 +46,18 @@ module.exports = {
4546
...
4647

4748
plugins: [
48-
require('tailwindcss-font-inter')({ // plugin's default settings
49-
a: -0.0223,
50-
b: 0.185,
51-
c: -0.1745,
52-
baseFontSize: 16,
53-
importFontFace: true,
54-
})
49+
require('tailwindcss-font-inter')({ // default settings
50+
a: -0.0223,
51+
b: 0.185,
52+
c: -0.1745,
53+
baseFontSize: 16,
54+
importFontFace: true,
55+
})
5556
]
56-
};
57+
}
5758
```
5859

60+
5961
### Plugin Options
6062

6163
The plugin has several adjustable options.
@@ -64,111 +66,101 @@ The plugin has several adjustable options.
6466
- `baseFontSize` — integer for base font size, default is `16`.
6567
- `importFontFace` — flag to inject Inter's `@font-face` to the output, default is `true`. If `false`, you should import Inter by yourself (e.g. from Google Fonts).
6668

69+
6770
### Theme Configuration
6871

6972
The plugin uses [`fontSize` core plugin](https://tailwindcss.com/docs/configuration#core-plugins) to generate proper letter spacing for Inter Typeface. Additionally it uses `fontFeatureSettings` to config font feature settings.
7073

7174
```js
7275
// tailwind.config.js
7376
module.exports = {
74-
theme: {
75-
fontFeatureSettings: {
76-
numeric: ['tnum', 'salt', 'ss02']
77-
},
78-
fontSize: {
79-
xs: '0.75rem',
80-
sm: '0.875rem',
81-
base: '1rem',
82-
lg: '1.125rem',
83-
xl: '36px',
84-
'2xl': '1.5rem',
85-
'3xl': '1.875rem',
86-
'4xl': '2.25rem',
87-
'5xl': '3rem',
88-
'6xl': '4rem'
89-
}
77+
theme: {
78+
fontFeatureSettings: {
79+
numeric: ['tnum', 'salt', 'ss02']
9080
},
91-
plugins: [require('tailwindcss-font-inter')()]
92-
};
81+
fontSize: {
82+
xs: '0.75rem',
83+
sm: '0.875rem',
84+
base: '1rem',
85+
lg: '1.125rem',
86+
xl: '36px',
87+
'2xl': '1.5rem',
88+
'3xl': '1.875rem',
89+
'4xl': '2.25rem',
90+
'5xl': '3rem',
91+
'6xl': '4rem'
92+
}
93+
},
94+
plugins: [require('tailwindcss-font-inter')]
95+
}
9396
```
9497

98+
9599
### Font Family
96100

97101
The plugin will inject `@font-face` declaration from https://rsms.me/inter/inter.css (set `importFontFace` option to `false` to import font manually) and add `.font-inter` utility class.
98102

103+
99104
## Font Sizes
100105

101-
Alongside with the default `text-lg` classes, the plugin will generate nested `text-lg` to set letter spacing according to Inter's **Dynamic Metrics**.
106+
Alongside with the default `text-*` classes, the plugin will generate nested `text-*` to set letter spacing according to Inter's **Dynamic Metrics**. Also it will generate additional classes to adjust letter spacing for `tracking-*` modifiers according to the **Dynamic Metrics**.
102107

103108
```css
104-
.font-inter .text-xs,
105-
.font-inter.text-xs {
106-
font-size: 0.75rem;
107-
letter-spacing: 0.0004908em;
108-
}
109-
110-
.font-inter .text-sm,
111-
.font-inter.text-sm {
112-
font-size: 0.875rem;
113-
letter-spacing: -0.0062235em;
109+
.font-inter .text-xs, .font-inter.text-xs {
110+
font-size: 0.75rem;
111+
letter-spacing: 0.000490774em
114112
}
115-
116-
.font-inter .text-base,
117-
.font-inter.text-base {
118-
font-size: 1rem;
119-
letter-spacing: -0.0109598em;
120-
}
121-
122-
.font-inter .text-lg,
123-
.font-inter.text-lg {
124-
font-size: 1.125rem;
125-
letter-spacing: -0.0143007em;
126-
}
127-
128-
.font-inter .text-2xl,
129-
.font-inter.text-2xl {
130-
font-size: 1.5rem;
131-
letter-spacing: -0.0194923em;
113+
.font-inter .text-xs .tracking-tighter,
114+
.font-inter .text-xs.tracking-tighter,
115+
.font-inter.text-xs .tracking-tighter,
116+
.font-inter.text-xs.tracking-tighter,
117+
.tracking-tighter .font-inter .text-xs,
118+
.tracking-tighter .font-inter.text-xs {
119+
font-size: 0.75rem;
120+
letter-spacing: -0.049509226em
132121
}
122+
/* ... */
123+
```
133124

134-
.font-inter .text-3xl,
135-
.font-inter.text-3xl {
136-
font-size: 1.875rem;
137-
letter-spacing: -0.0213145em;
138-
}
125+
And if the font size in config specified along with line height, it will be applied as well.
139126

140-
.font-inter .text-4xl,
141-
.font-inter.text-4xl {
142-
font-size: 2.25rem;
143-
letter-spacing: -0.0219541em;
144-
}
127+
```js
128+
module.exports = {
129+
theme: {
130+
fontSize: {
131+
xs: ['0.75rem', { lineHeight: '1.25rem' }]
132+
// ...
133+
}
134+
},
135+
plugins: [require('tailwindcss-font-inter')]
136+
};
137+
```
145138

146-
.font-inter .text-5xl,
147-
.font-inter.text-5xl {
148-
font-size: 3rem;
149-
letter-spacing: -0.0222574em;
150-
}
139+
Will generate classes like this:
151140

152-
.font-inter .text-6xl,
153-
.font-inter.text-6xl {
154-
font-size: 4rem;
155-
letter-spacing: -0.0222974em;
141+
```css
142+
.font-inter .text-xs, .font-inter.text-xs {
143+
line-height: 1.25rem;
144+
font-size: 0.75rem;
145+
letter-spacing: 0.000490774em
156146
}
147+
/* ... */
157148
```
158149

150+
159151
### Font features
160152

161153
Also the plugin generates utility classes which allow you to specify named sets of font feature settings.
162154

163155
```js
164156
// tailwind.config.js
165157
module.exports = {
166-
theme: {
167-
interFontFeatures: {
168-
numeric: ['tnum', 'salt', 'ss02']
169-
}
170-
},
171-
plugins: [require('tailwindcss-font-inter')()]
158+
theme: {
159+
interFontFeatures: {
160+
numeric: ['tnum', 'salt', 'ss02']
161+
}
162+
},
163+
plugins: [require('tailwindcss-font-inter')]
172164
};
173165
```
174166

@@ -178,21 +170,22 @@ This will generate the following classes:
178170
/* This is default classes */
179171
.font-inter .font-feature-normal,
180172
.font-inter.font-feature-normal {
181-
font-feature-settings: normal;
173+
font-feature-settings: normal;
182174
}
183175

184176
.font-inter .font-feature-default,
185177
.font-inter.font-feature-default {
186-
font-feature-settings: 'calt' 1, 'kern' 1;
178+
font-feature-settings: 'calt' 1, 'kern' 1;
187179
}
188180

189181
/* This is a custom class defined in config */
190182
.font-inter .font-feature-numeric,
191183
.font-inter.font-feature-numeric {
192-
font-feature-settings: 'tnum' 1, 'salt' 1, 'ss02' 1;
184+
font-feature-settings: 'tnum' 1, 'salt' 1, 'ss02' 1;
193185
}
194186
```
195187

188+
196189
# License
197190

198191
[MIT](LICENSE.md)

0 commit comments

Comments
 (0)