Typography Plugin for Tailwind CSS

Requirements

This plugin requires Tailwind CSS 1.2 or later. If your project uses an older version of Tailwind, you should install the latest 2.x version of this plugin (npm install tailwindcss-typography@2.x).

Installation

1npm install tailwindcss-typography

Usage

1// tailwind.config.js
2module.exports = {
3  theme: {
4    textIndent: { // defaults to {}
5      '1': '0.25rem',
6      '2': '0.5rem',
7    },
8    textShadow: { // defaults to {}
9      'default': '0 2px 5px rgba(0, 0, 0, 0.5)',
10      'lg': '0 2px 10px rgba(0, 0, 0, 0.5)',
11    },
12    textDecorationStyle: { // defaults to these values
13      'solid': 'solid',
14      'double': 'double',
15      'dotted': 'dotted',
16      'dashed': 'dashed',
17      'wavy': 'wavy',
18    },
19    textDecorationColor: { // defaults to theme => theme('colors')
20      'red': '#f00',
21      'green': '#0f0',
22      'blue': '#00f',
23    },
24    fontVariantCaps: { // defaults to these values
25      'normal': 'normal',
26      'small': 'small-caps',
27      'all-small': 'all-small-caps',
28      'petite': 'petite-caps',
29      'unicase': 'unicase',
30      'titling': 'titling-caps',
31    },
32    fontVariantNumeric: { // defaults to these values
33      'normal': 'normal',
34      'ordinal': 'ordinal',
35      'slashed-zero': 'slashed-zero',
36      'lining': 'lining-nums',
37      'oldstyle': 'oldstyle-nums',
38      'proportional': 'proportional-nums',
39      'tabular': 'tabular-nums',
40      'diagonal-fractions': 'diagonal-fractions',
41      'stacked-fractions': 'stacked-fractions',
42    },
43    fontVariantLigatures: { // defaults to these values
44      'normal': 'normal',
45      'none': 'none',
46      'common': 'common-ligatures',
47      'no-common': 'no-common-ligatures',
48      'discretionary': 'discretionary-ligatures',
49      'no-discretionary': 'no-discretionary-ligatures',
50      'historical': 'historical-ligatures',
51      'no-historical': 'no-historical-ligatures',
52      'contextual': 'contextual',
53      'no-contextual': 'no-contextual',
54    },
55    textRendering: { // defaults to these values
56      'rendering-auto': 'auto',
57      'optimize-legibility': 'optimizeLegibility',
58      'optimize-speed': 'optimizeSpeed',
59      'geometric-precision': 'geometricPrecision'
60    },
61    textStyles: theme => ({ // defaults to {}
62      heading: {
63        output: false, // this means there won't be a "heading" component in the CSS, but it can be extended
64        fontWeight: theme('fontWeight.bold'),
65        lineHeight: theme('lineHeight.tight'),
66      },
67      h1: {
68        extends: 'heading', // this means all the styles in "heading" will be copied here; "extends" can also be an array to extend multiple text styles
69        fontSize: theme('fontSize.5xl'),
70        '@screen sm': {
71          fontSize: theme('fontSize.6xl'),
72        },
73      },
74      h2: {
75        extends: 'heading',
76        fontSize: theme('fontSize.4xl'),
77        '@screen sm': {
78          fontSize: theme('fontSize.5xl'),
79        },
80      },
81      h3: {
82        extends: 'heading',
83        fontSize: theme('fontSize.4xl'),
84      },
85      h4: {
86        extends: 'heading',
87        fontSize: theme('fontSize.3xl'),
88      },
89      h5: {
90        extends: 'heading',
91        fontSize: theme('fontSize.2xl'),
92      },
93      h6: {
94        extends: 'heading',
95        fontSize: theme('fontSize.xl'),
96      },
97      link: {
98        fontWeight: theme('fontWeight.bold'),
99        color: theme('colors.blue.400'),
100        '&:hover': {
101          color: theme('colors.blue.600'),
102          textDecoration: 'underline',
103        },
104      },
105      richText: {
106        fontWeight: theme('fontWeight.normal'),
107        fontSize: theme('fontSize.base'),
108        lineHeight: theme('lineHeight.relaxed'),
109        '> * + *': {
110          marginTop: '1em',
111        },
112        'h1': {
113          extends: 'h1',
114        },
115        'h2': {
116          extends: 'h2',
117        },
118        'h3': {
119          extends: 'h3',
120        },
121        'h4': {
122          extends: 'h4',
123        },
124        'h5': {
125          extends: 'h5',
126        },
127        'h6': {
128          extends: 'h6',
129        },
130        'ul': {
131          listStyleType: 'disc',
132        },
133        'ol': {
134          listStyleType: 'decimal',
135        },
136        'a': {
137          extends: 'link',
138        },
139        'b, strong': {
140          fontWeight: theme('fontWeight.bold'),
141        },
142        'i, em': {
143          fontStyle: 'italic',
144        },
145      },
146    }),
147  },
148  variants: { // all the following default to ['responsive']
149    textIndent: ['responsive'],
150    textShadow: ['responsive'],
151    textDecorationStyle: ['responsive'],
152    textDecorationColor: ['responsive'],
153    ellipsis: ['responsive'],
154    hyphens: ['responsive'],
155    kerning: ['responsive'],
156    textUnset: ['responsive'],
157    fontVariantCaps: ['responsive'],
158    fontVariantNumeric: ['responsive'],
159    fontVariantLigatures: ['responsive'],
160    textRendering: ['responsive'],
161  },
162  plugins: [
163    require('tailwindcss-typography')({
164      // all these options default to the values specified here
165      ellipsis: true,         // whether to generate ellipsis utilities
166      hyphens: true,          // whether to generate hyphenation utilities
167      kerning: true,          // whether to generate kerning utilities
168      textUnset: true,        // whether to generate utilities to unset text properties
169      componentPrefix: 'c-',  // the prefix to use for text style classes
170    }),
171  ],
172};

This plugin generates the following utilities:

1/* configurable with the "textIndent" theme object */
2.indent-[key] {
3  text-indent: [value];
4}
5
6/* configurable with the "textShadow" theme object */
7/* note: the "default" key generates a simple "text-shadow" class (instead of "text-shadow-default") */
8.text-shadow-[key] {
9  text-shadow: [value];
10}
11
12/* configurable with the "textDecorationStyle" theme object */
13.line-[key] {
14  text-decoration-style: [value];
15}
16
17/* configurable with the "textDecorationColor" theme object */
18.line-[key] {
19  text-decoration-color: [value];
20}
21
22/* generated when the "ellipsis" option is set to true */
23.ellipsis {
24  text-overflow: ellipsis;
25}
26.no-ellipsis {
27  text-overflow: clip;
28}
29
30/* generated when the "hyphens" option is set to true */
31.hyphens-none {
32  hyphens: none;
33}
34.hyphens-manual {
35  hyphens: manual;
36}
37.hyphens-auto {
38  hyphens: auto;
39}
40
41/* generated when the "kerning" option is set to true */
42.kerning {
43  font-kerning: normal;
44}
45.kerning-none {
46  font-kerning: none;
47}
48.kerning-auto {
49  font-kerning: auto;
50}
51
52/* generated when the "textUnset" option is set to true */
53.font-family-unset {
54  font-family: inherit;
55}
56.font-weight-unset {
57  font-weight: inherit;
58}
59.font-style-unset {
60  font-style: inherit;
61}
62.text-size-unset {
63  font-size: inherit;
64}
65.text-align-unset {
66  text-align: inherit;
67}
68.leading-unset {
69  line-height: inherit;
70}
71.tracking-unset {
72  letter-spacing: inherit;
73}
74.text-color-unset {
75  color: inherit;
76}
77.text-transform-unset {
78  text-transform: inherit;
79}
80
81/* configurable with the "fontVariantCaps" theme object */
82.caps-normal {
83  font-variant-caps: normal;
84}
85.caps-small {
86  font-variant-caps: small-caps;
87}
88.caps-all-small {
89  font-variant-caps: all-small-caps;
90}
91.caps-petite {
92  font-variant-caps: petite-caps;
93}
94.caps-unicase {
95  font-variant-caps: unicase;
96}
97.caps-titling {
98  font-variant-caps: titling-caps;
99}
100
101/* configurable with the "fontVariantNumeric" theme object */
102.nums-normal {
103  font-variant-numeric: normal;
104}
105.nums-ordinal {
106  font-variant-numeric: ordinal;
107}
108.nums-slashed-zero {
109  font-variant-numeric: slashed-zero;
110}
111.nums-lining {
112  font-variant-numeric: lining-nums;
113}
114.nums-oldstyle {
115  font-variant-numeric: oldstyle-nums;
116}
117.nums-proportional {
118  font-variant-numeric: proportional-nums;
119}
120.nums-tabular {
121  font-variant-numeric: tabular-nums;
122}
123.nums-diagonal-fractions {
124  font-variant-numeric: diagonal-fractions;
125}
126.nums-stacked-fractions {
127  font-variant-numeric: stacked-fractions;
128}
129
130/* configurable with the "fontVariantLigatures" theme object */
131.ligatures-normal {
132  font-variant-ligatures: normal;
133}
134.ligatures-none {
135  font-variant-ligatures: none;
136}
137.ligatures-common {
138  font-variant-ligatures: common-ligatures;
139}
140.ligatures-no-common {
141  font-variant-ligatures: no-common-ligatures;
142}
143.ligatures-discretionary {
144  font-variant-ligatures: discretionary-ligatures;
145}
146.ligatures-no-discretionary {
147  font-variant-ligatures: no-discretionary-ligatures;
148}
149.ligatures-historical {
150  font-variant-ligatures: historical-ligatures;
151}
152.ligatures-no-historical {
153  font-variant-ligatures: no-historical-ligatures;
154}
155.ligatures-contextual {
156  font-variant-ligatures: contextual;
157}
158.ligatures-no-contextual {
159  font-variant-ligatures: no-contextual;
160}
161
162/* configurable with the "textRendering" theme object */
163.text-rendering-auto {
164  text-rendering: auto;
165}
166.text-optimize-legibility {
167  text-rendering: optimizeLegibility;
168}
169.text-optimize-speed {
170  text-rendering: optimizeSpeed;
171}
172.text-geometric-precision {
173  text-rendering: geometricPrecision;
174}

The plugin also generates components for text styles. The above config example would generate something like this:

1.c-h1 {
2  font-weight: 700;
3  line-height: 1.25;
4  font-size: 3rem;
5}
6@media (min-width: 640px) {
7  .c-h1 {
8    font-size: 4rem;
9  }
10}
11.c-h2 {
12  font-weight: 800;
13  line-height: 1.25;
14  font-size: 2.25rem;
15}
16@media (min-width: 640px) {
17  .c-h2 {
18    font-size: 3rem;
19  }
20}
21.c-h3 {
22  font-weight: 700;
23  line-height: 1.25;
24  font-size: 2.25rem;
25}
26.c-h4 {
27  font-weight: 700;
28  line-height: 1.25;
29  font-size: 1.875rem;
30}
31.c-h5 {
32  font-weight: 700;
33  line-height: 1.25;
34  font-size: 1.5rem;
35}
36.c-h6 {
37  font-weight: 700;
38  line-height: 1.25;
39  font-size: 1.25rem;
40}
41
42.c-link {
43  font-weight: 700;
44  color: #63b3ed;
45}
46.c-link:hover {
47  color: #3182ce;
48  text-decoration: underline;
49}
50
51.c-rich-text {
52  font-weight: 400;
53  font-size: 1rem;
54  line-height: 1.625;
55}
56.c-rich-text > * + * {
57  margin-top: 1em;
58}
59.c-rich-text h1 {
60  font-weight: 700;
61  line-height: 1.25;
62  font-size: 3rem;
63}
64@media (min-width: 640px) {
65  .c-rich-text h1 {
66    font-size: 4rem;
67  }
68}
69.c-rich-text h2 {
70  font-weight: 800;
71  line-height: 1.25;
72  font-size: 2.25rem;
73}
74@media (min-width: 640px) {
75  .c-rich-text h2 {
76    font-size: 3rem;
77  }
78}
79.c-rich-text h3 {
80  font-weight: 700;
81  line-height: 1.25;
82  font-size: 2.25rem;
83}
84.c-rich-text h4 {
85  font-weight: 700;
86  line-height: 1.25;
87  font-size: 1.875rem;
88}
89.c-rich-text h5 {
90  font-weight: 700;
91  line-height: 1.25;
92  font-size: 1.5rem;
93}
94.c-rich-text h6 {
95  font-weight: 700;
96  line-height: 1.25;
97  font-size: 1.25rem;
98}
99.c-rich-text ul {
100  list-style-type: disc;
101}
102.c-rich-text ol {
103  list-style-type: decimal;
104}
105.c-rich-text a {
106  font-weight: 700;
107  color: #63b3ed;
108}
109.c-rich-text a:hover {
110  color: #3182ce;
111  text-decoration: underline;
112}
113.c-rich-text b, .c-rich-text strong {
114  font-weight: 700;
115}
116.c-rich-text i, .c-rich-text em {
117  font-style: italic;
118}