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
npm install tailwindcss-typography
Usage
// tailwind.config.jsmoduleexports = theme: textIndent: // defaults to {} '1': '0.25rem' '2': '0.5rem' textShadow: // defaults to {} 'default': '0 2px 5px rgba(0, 0, 0, 0.5)' 'lg': '0 2px 10px rgba(0, 0, 0, 0.5)' textDecorationStyle: // defaults to these values 'solid': 'solid' 'double': 'double' 'dotted': 'dotted' 'dashed': 'dashed' 'wavy': 'wavy' textDecorationColor: // defaults to theme => theme('colors') 'red': '#f00' 'green': '#0f0' 'blue': '#00f' fontVariantCaps: // defaults to these values 'normal': 'normal' 'small': 'small-caps' 'all-small': 'all-small-caps' 'petite': 'petite-caps' 'unicase': 'unicase' 'titling': 'titling-caps' fontVariantNumeric: // defaults to these values 'normal': 'normal' 'ordinal': 'ordinal' 'slashed-zero': 'slashed-zero' 'lining': 'lining-nums' 'oldstyle': 'oldstyle-nums' 'proportional': 'proportional-nums' 'tabular': 'tabular-nums' 'diagonal-fractions': 'diagonal-fractions' 'stacked-fractions': 'stacked-fractions' fontVariantLigatures: // defaults to these values 'normal': 'normal' 'none': 'none' 'common': 'common-ligatures' 'no-common': 'no-common-ligatures' 'discretionary': 'discretionary-ligatures' 'no-discretionary': 'no-discretionary-ligatures' 'historical': 'historical-ligatures' 'no-historical': 'no-historical-ligatures' 'contextual': 'contextual' 'no-contextual': 'no-contextual' textRendering: // defaults to these values 'rendering-auto': 'auto' 'optimize-legibility': 'optimizeLegibility' 'optimize-speed': 'optimizeSpeed' 'geometric-precision': 'geometricPrecision' // defaults to {} heading: output: false // this means there won't be a "heading" component in the CSS, but it can be extended fontWeight: lineHeight: h1: extends: 'heading' // this means all the styles in "heading" will be copied here; "extends" can also be an array to extend multiple text styles fontSize: '@screen sm': fontSize: h2: extends: 'heading' fontSize: '@screen sm': fontSize: h3: extends: 'heading' fontSize: h4: extends: 'heading' fontSize: h5: extends: 'heading' fontSize: h6: extends: 'heading' fontSize: link: fontWeight: color: '&:hover': color: textDecoration: 'underline' richText: fontWeight: fontSize: lineHeight: '> * + *': marginTop: '1em' 'h1': extends: 'h1' 'h2': extends: 'h2' 'h3': extends: 'h3' 'h4': extends: 'h4' 'h5': extends: 'h5' 'h6': extends: 'h6' 'ul': listStyleType: 'disc' 'ol': listStyleType: 'decimal' 'a': extends: 'link' 'b, strong': fontWeight: 'i, em': fontStyle: 'italic' variants: // all the following default to ['responsive'] textIndent: 'responsive' textShadow: 'responsive' textDecorationStyle: 'responsive' textDecorationColor: 'responsive' ellipsis: 'responsive' hyphens: 'responsive' kerning: 'responsive' textUnset: 'responsive' fontVariantCaps: 'responsive' fontVariantNumeric: 'responsive' fontVariantLigatures: 'responsive' textRendering: 'responsive' plugins: // all these options default to the values specified here ellipsis: true // whether to generate ellipsis utilities hyphens: true // whether to generate hyphenation utilities kerning: true // whether to generate kerning utilities textUnset: true // whether to generate utilities to unset text properties componentPrefix: 'c-' // the prefix to use for text style classes ;
This plugin generates the following utilities:
/* configurable with the "textIndent" theme object */ /* configurable with the "textShadow" theme object *//* note: the "default" key generates a simple "text-shadow" class (instead of "text-shadow-default") */ /* configurable with the "textDecorationStyle" theme object */ /* configurable with the "textDecorationColor" theme object */ /* generated when the "ellipsis" option is set to true */ /* generated when the "hyphens" option is set to true */ /* generated when the "kerning" option is set to true */ /* generated when the "textUnset" option is set to true */ /* configurable with the "fontVariantCaps" theme object */ /* configurable with the "fontVariantNumeric" theme object */ /* configurable with the "fontVariantLigatures" theme object */ /* configurable with the "textRendering" theme object */
The plugin also generates components for text styles. The above config example would generate something like this:
{}{} {}{}