Font sizes
Add or modify font sizes
If you want to modify or add a new font size to your theme, you can do so by adding it to your theme.json file.
All Tailwind CSS font sizes are added there by default.
1"typography": {
2 "fontSizes": [
3 {
4 "name": "Extra Small",
5 "slug": "xs",
6 "size": "0.75rem"
7 },
8 {
9 "name": "Small",
10 "slug": "sm",
11 "size": "0.875rem"
12 },
13 {
14 "name": "Base",
15 "slug": "base",
16 "size": "1rem"
17 },
18 {
19 "name": "Large",
20 "slug": "lg",
21 "size": "1.125rem"
22 },
23 {
24 "name": "Extra Large",
25 "slug": "xl",
26 "size": "1.25rem"
27 },
28 {
29 "name": "2XL",
30 "slug": "2xl",
31 "size": "1.5rem"
32 },
33 {
34 "name": "3XL",
35 "slug": "3xl",
36 "size": "1.875rem"
37 },
38 {
39 "name": "4XL",
40 "slug": "4xl",
41 "size": "2.25rem"
42 },
43 {
44 "name": "5XL",
45 "slug": "5xl",
46 "size": "3rem"
47 },
48 {
49 "name": "6XL",
50 "slug": "6xl",
51 "size": "3.75rem"
52 },
53 {
54 "name": "7XL",
55 "slug": "7xl",
56 "size": "4.5rem"
57 },
58 {
59 "name": "8XL",
60 "slug": "8xl",
61 "size": "6rem"
62 },
63 {
64 "name": "9XL",
65 "slug": "9xl",
66 "size": "8rem"
67 }
68 ]
69}
WordPress will generate and inject CSS variables, which we can pass on to Tailwind through the resources/css/theme.css file.
1--text-xs: var(--wp--preset--font-size--xs, 0.75rem);
2--text-sm: var(--wp--preset--font-size--sm, 0.875rem);
3--text-base: var(--wp--preset--font-size--base, 1rem);
4--text-lg: var(--wp--preset--font-size--lg, 1.125rem);
5--text-xl: var(--wp--preset--font-size--xl, 1.25rem);
6--text-2xl: var(--wp--preset--font-size--2-xl, 1.5rem);
7--text-3xl: var(--wp--preset--font-size--3-xl, 1.875rem);
8--text-4xl: var(--wp--preset--font-size--4-xl, 2.25rem);
9--text-5xl: var(--wp--preset--font-size--5-xl, 3rem);
10--text-6xl: var(--wp--preset--font-size--6-xl, 3.75rem);
11--text-7xl: var(--wp--preset--font-size--7-xl, 4.5rem);
12--text-8xl: var(--wp--preset--font-size--8-xl, 6rem);
13--text-9xl: var(--wp--preset--font-size--9-xl, 8rem);