tailwindcss-typography

Typography Plugin for Tailwind CSS

Installation

npm install tailwindcss-typography

Usage

// tailwind.config.js
{
  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)',
    },
    textStyles: theme => ({ // defaults to {}
      heading: {
        output: false, // this means there won't be a "heading" component in the CSS, but it can be extended
        fontWeight: theme('fontWeight.bold'),
        lineHeight: theme('lineHeight.tight'),
      },
      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: theme('fontSize.5xl'),
        '@screen sm': {
          fontSize: theme('fontSize.6xl'),
        },
      },
      h2: {
        extends: 'heading',
        fontSize: theme('fontSize.4xl'),
        '@screen sm': {
          fontSize: theme('fontSize.5xl'),
        },
      },
      h3: {
        extends: 'heading',
        fontSize: theme('fontSize.4xl'),
      },
      h4: {
        extends: 'heading',
        fontSize: theme('fontSize.3xl'),
      },
      h5: {
        extends: 'heading',
        fontSize: theme('fontSize.2xl'),
      },
      h6: {
        extends: 'heading',
        fontSize: theme('fontSize.xl'),
      },
      link: {
        fontWeight: theme('fontWeight.bold'),
        color: theme('colors.blue.400'),
        '&:hover': {
          color: theme('colors.blue.600'),
          textDecoration: 'underline',
        },
      },
      richText: {
        fontWeight: theme('fontWeight.normal'),
        fontSize: theme('fontSize.base'),
        lineHeight: theme('lineHeight.relaxed'),
        '> * + *': {
          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: theme('fontWeight.bold'),
        },
        'i, em': {
          fontStyle: 'italic',
        },
      },
    }),
  },
  variants: { // all the following default to ['responsive']
    textIndent: ['responsive'],
    textShadow: ['responsive'],
    ellipsis: ['responsive'],
    hyphens: ['responsive'],
    textUnset: ['responsive'],
    caps: ['responsive'],
    nums: ['responsive'],
    ligatures: ['responsive'],
  },
  plugins: [
    require('tailwindcss-typography')({
      // all these options default to the values specified here
      ellipsis: true,         // whether to generate ellipsis utilities
      hyphens: true,          // whether to generate hyphenation utilities
      textUnset: true,        // whether to generate utilities to unset text properties
      caps: true,             // whether to generate utilities to use alternate glyphs for capital letters
      nums: true,             // whether to generate utilities to use alternate glyphs for numbers, fractions, and ordinal markers
      ligatures: true,        // whether to generate ligature utilities
      componentPrefix: 'c-',  // the prefix to use for text style classes
    }),
  ],
}

This plugin generates the following utilities:

/* configurable with the "textIndent" theme object */
.indent-[key] {
  text-indent: [value];
}

/* configurable with the "textShadow" theme object */
/* note: the "default" key generates a simple "text-shadow" class (instead of "text-shadow-default") */
.text-shadow-[key] {
  text-shadow: [value];
}

/* generated when the "ellipsis" option is set to true */
.ellipsis {
  text-overflow: ellipsis;
}
.no-ellipsis {
  text-overflow: clip;
}

/* generated when the "hyphens" option is set to true */
.hyphens-none {
  hyphens: none;
}
.hyphens-manual {
  hyphens: manual;
}
.hyphens-auto {
  hyphens: auto;
}

/* generated when the "textUnset" option is set to true */
.font-family-unset {
  font-family: inherit;
}
.font-weight-unset {
  font-weight: inherit;
}
.font-style-unset {
  font-style: inherit;
}
.text-size-unset {
  font-size: inherit;
}
.text-align-unset {
  text-align: inherit;
}
.leading-unset {
  line-height: inherit;
}
.tracking-unset {
  letter-spacing: inherit;
}
.text-color-unset {
  color: inherit;
}
.text-transform-unset {
  text-transform: inherit;
}

/* generated when the "caps" option is set to true */
.normal-caps {
  font-variant-caps: normal;
}
.small-caps {
  font-variant-caps: small-caps;
}
.all-small-caps {
  font-variant-caps: all-small-caps;
}
.petite-caps {
  font-variant-caps: petite-caps;
}
.unicase {
  font-variant-caps: unicase;
}
.titling-caps {
  font-variant-caps: titling-caps;
}

/* generated when the "nums" option is set to true */
.normal-nums {
  font-variant-numeric: normal;
}
.ordinal-nums {
  font-variant-numeric: ordinal;
}
.slashed-zeros {
  font-variant-numeric: slashed-zero;
}
.lining-nums {
  font-variant-numeric: lining-nums;
}
.oldstyle-nums {
  font-variant-numeric: oldstyle-nums;
}
.proportional-nums {
  font-variant-numeric: proportional-nums;
}
.tabular-nums {
  font-variant-numeric: tabular-nums;
}
.diagonal-fractions {
  font-variant-numeric: diagonal-fractions;
}
.stacked-fractions {
  font-variant-numeric: stacked-fractions;
}

/* generated when the "ligatures" option is set to true */
.normal-ligatures {
  font-variant-ligatures: normal;
}
.no-ligatures {
  font-variant-ligatures: none;
}
.common-ligatures {
  font-variant-ligatures: common-ligatures;
}
.no-common-ligatures {
  font-variant-ligatures: no-common-ligatures;
}
.discretionary-ligatures {
  font-variant-ligatures: discretionary-ligatures;
}
.no-discretionary-ligatures {
  font-variant-ligatures: no-discretionary-ligatures;
}
.historical-ligatures {
  font-variant-ligatures: historical-ligatures;
}
.no-historical-ligatures {
  font-variant-ligatures: no-historical-ligatures;
}
.contextual-ligatures {
  font-variant-ligatures: contextual;
}
.no-contextual-ligatures {
  font-variant-ligatures: no-contextual;
}

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

.c-h1 {
  font-weight: 700;
  line-height: 1.25;
  font-size: 3rem;
}
@media (min-width: 640px) {
  .c-h1 {
    font-size: 4rem;
  }
}
.c-h2 {
  font-weight: 800;
  line-height: 1.25;
  font-size: 2.25rem;
}
@media (min-width: 640px) {
  .c-h2 {
    font-size: 3rem;
  }
}
.c-h3 {
  font-weight: 700;
  line-height: 1.25;
  font-size: 2.25rem;
}
.c-h4 {
  font-weight: 700;
  line-height: 1.25;
  font-size: 1.875rem;
}
.c-h5 {
  font-weight: 700;
  line-height: 1.25;
  font-size: 1.5rem;
}
.c-h6 {
  font-weight: 700;
  line-height: 1.25;
  font-size: 1.25rem;
}

.c-link {
  font-weight: 700;
  color: #63b3ed;
}
.c-link:hover {
  color: #3182ce;
  text-decoration: underline;
}

.c-rich-text {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.625;
}
.c-rich-text > * + * {
  margin-top: 1em;
}
.c-rich-text h1 {
  font-weight: 700;
  line-height: 1.25;
  font-size: 3rem;
}
@media (min-width: 640px) {
  .c-rich-text h1 {
    font-size: 4rem;
  }
}
.c-rich-text h2 {
  font-weight: 800;
  line-height: 1.25;
  font-size: 2.25rem;
}
@media (min-width: 640px) {
  .c-rich-text h2 {
    font-size: 3rem;
  }
}
.c-rich-text h3 {
  font-weight: 700;
  line-height: 1.25;
  font-size: 2.25rem;
}
.c-rich-text h4 {
  font-weight: 700;
  line-height: 1.25;
  font-size: 1.875rem;
}
.c-rich-text h5 {
  font-weight: 700;
  line-height: 1.25;
  font-size: 1.5rem;
}
.c-rich-text h6 {
  font-weight: 700;
  line-height: 1.25;
  font-size: 1.25rem;
}
.c-rich-text ul {
  list-style-type: disc;
}
.c-rich-text ol {
  list-style-type: decimal;
}
.c-rich-text a {
  font-weight: 700;
  color: #63b3ed;
}
.c-rich-text a:hover {
  color: #3182ce;
  text-decoration: underline;
}
.c-rich-text b, .c-rich-text strong {
  font-weight: 700;
}
.c-rich-text i, .c-rich-text em {
  font-style: italic;
}

Changelog

[2.2.0] - 2019-09-02

Added

• Added utilities for some OpenType features: caps (alternate glyphs for capital letters), nums (alternate glyphs for numbers, fractions, and ordinal markers), and ligatures
• Added a no-ellipsis utility to undo ellipsis at breakpoints