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
v4 was a major change to how projects are configured as well as what plugins are allowed to modify. Previously, this plugin disabled `corePlugins` like `fontSize` in order to include custom CSS properties within the same utilities. This is no longer possible in v4, so while the *usage* hasn't changed, the CSS being output now includes duplicate declarations — one from the plugin and one from Tailwind itself.
8
+
9
+
v4 also allows configuration within CSS itself. However, this plugin relies on object values which aren't supported in CSS, so a JavaScript config file is still required. You can either use the JS file for all your settings, or just the settings for this plugin and configure the rest of your project in CSS.
10
+
11
+
The `mode` option has also been removed. This also removes the dependency on `@capsizecss/core`.
Copy file name to clipboardExpand all lines: README.md
+28-36Lines changed: 28 additions & 36 deletions
Original file line number
Diff line number
Diff line change
@@ -2,19 +2,28 @@
2
2
3
3
[![npm version][npm-img]][npm-url]
4
4
5
-
> A TailwindCSS plugin that generates leading-trim utility classes using [Capsize](https://github.com/seek-oss/capsize).
5
+
> A TailwindCSS plugin that generates text-box-trim utility classes using [Capsize].
6
6
7
7
```bash
8
8
npm install --save-dev tailwindcss-capsize
9
9
```
10
10
11
-
## leading-trim?
11
+
## text-box-trim?
12
12
13
-
A [proposed CSS property](https://www.w3.org/TR/css-inline-3/#leading-trim) to remove the extra space from text bounding boxes, which affects optical alignment. This [article from Microsoft Design][] outlines the problem and how the proposed solution works.
13
+
Formerly known as `leading-trim`, a [proposed CSS property] to remove the extra space from text bounding boxes, which affects optical alignment. This [article from Microsoft Design] outlines the problem and how the proposed solution works.
14
14
15
15
## Configuration
16
16
17
-
This plugin requires a `fontMetrics` key added to your Tailwind theme. It should be an object with keys matching those in your `fontFamily` definitions, and each key should have an object of the following shape:
17
+
A JavaScript config file is required due to the values needed by the plugin.
18
+
19
+
```css
20
+
@config "../tailwind.config.js";
21
+
```
22
+
23
+
Other Tailwind settings can be configured through CSS directives or included in the config file.
24
+
25
+
This plugin requires a `fontMetrics` key added to your Tailwind theme. It should
26
+
be an object with keys matching those in your `fontFamily` definitions, and each key should have an object of the following shape:
18
27
19
28
```ts
20
29
{
@@ -26,18 +35,20 @@ This plugin requires a `fontMetrics` key added to your Tailwind theme. It should
26
35
}
27
36
```
28
37
29
-
These values can be determined by using the [Capsize website](https://seek-oss.github.io/capsize/), [fontkit](https://github.com/foliojs/fontkit), [FontDrop!](https://fontdrop.info), or some other means.
38
+
These values can be determined by using the [Capsize website], [fontkit], [FontDrop!], or some other means.
30
39
31
40
### A full example
32
41
33
42
```js
34
43
// tailwind.config.js
35
-
module.exports= {
44
+
importpluginCapsizefrom'tailwindcss-capsize'
45
+
exportdefault {
36
46
theme: {
37
47
fontFamily: {
38
48
sans: ['Inter', 'sans-serif'],
39
49
},
40
50
fontMetrics: {
51
+
// Keys here must match those in fontFamily.
41
52
sans: {
42
53
capHeight:2048,
43
54
ascent:2728,
@@ -46,11 +57,9 @@ module.exports = {
46
57
unitsPerEm:2816,
47
58
},
48
59
},
49
-
fontSize: { ... },
50
-
lineHeight: { ... },
51
-
...
60
+
// ...
52
61
},
53
-
plugins: [require('tailwindcss-capsize')],
62
+
plugins: [pluginCapsize],
54
63
}
55
64
```
56
65
@@ -73,7 +82,7 @@ The new `.capsize` utility class should be applied to the _direct parent_ elemen
73
82
The plugin assumes a root font-size of `16px` when converting from rem values. To use a different value, pass it in (without units) to the plugin options.
By default the plugin replaces the `fontFamily`, `fontSize`, and `lineHeight` core plugins, adding custom properties to the output of each which are used in the `calc()` expressions in the utility class.
94
-
95
-
```diff
96
-
.font-sans {
97
-
+ --ascent-scale: 0.9688;
98
-
+ --descent-scale: 0.2415;
99
-
+ --cap-height-scale: 0.7273;
100
-
+ --line-gap-scale: 0;
101
-
+ --line-height-scale: 1.2102;
102
-
font-family: Inter, sans-serif;
103
-
}
104
-
```
105
-
106
-
If you need to support browsers that don’t support custom properties, setting `mode` to `'classic'` will handle all the calculation at build-time before the CSS is output. This will require that the markup matches a specific selector format.
0 commit comments