A17 Tailwind Plugins

Description

This plugin generates classes for responsive typography sets. The idea being that instead of giving text styles with multiple Tailwind classes and manually overriding at different breakpoints - you would instead have a responsive system set up.

Similiar to responsive spacing, at AREA 17 we like responsive typesets classes so that the type across a site can be known and predictable. We define our type system and then use them consistently across a site. We never have a unique type style or a unique style at a breakpoint - everything is part of the system.

Includes ability to override type styles.

Setup

tailwind.config.js

const { Typography } = require('@area17/a17-tailwind-plugins');

module.exports = {
  ...
  plugins: [Typography],
  theme: {
    fontFamilies: {
      "sans": "SuisseIntl, Helvetica, Arial, sans-serif",
      "serif": "\"Times New Roman\", Georgia, serif",
      "mono": "\"Lucida Console\", Courier, monospace"
    },
    typesets: {
      "h1": {
        "xs": {
          "font-family": "var(--font-sans)",
          "bold-weight": 500,
          "font-size": "32",
          "line-height": 1.2,
          "letter-spacing": "-0.02em",
          "font-smoothing": "true"
        },
        "md": {
          "font-size": "36px"
        },
        "lg": {
          "font-size": "48px"
        }
      },
      "h2": {
        "xs": {
          "font-family": "var(--font-sans)",
          "bold-weight": "500",
          "font-size": "28px",
          "line-height": "1.2",
          "letter-spacing": "-0.02em",
          "font-smoothing": "true"
        },
        "md": {
          "font-size": "32px"
        },
        "lg": {
          "font-size": "36px"
        }
      },
      "body": {
        "xs": {
          "font-family": "var(--font-sans)",
          "bold-weight": "600",
          "font-size": "14px",
          "line-height": "1.7",
          "font-smoothing": "true"
        },
        "md": {
          "font-size": "16px"
        }
      }
    }
  }
  ...
};

Settable type properties

You can set any CSS key/value type for fonts/text styles and also two some special, none standard font properties you can set:

bold-weight - sets a variable of --bold-weight and sets any b or strong children of the element to use font-weight: var(--bold-weight); to give you control over the font weights
font-smoothing - true or false, equivalent to Tailwind's antialiased and subpixel-antialiased classes

Output

Based on the reference config mentioned in this guide, for the typeset named h1 we'd get the following in our CSS:

app.css

:root {
  --font-sans: SuisseIntl, Helvetica, Arial, sans-serif;
  --font-serif: "Times New Roman", Georgia, serif;
  --font-mono: "Lucida Console", Courier, monospace;
  --f-h1-font-family: var(--font-sans);
  --f-h1-font-size: 2rem;
  --f-h1-font-weight: 500;
  --f-h1-line-height: 1.2;
  --f-h1-letter-spacing: -0.02em;
  --f-h1--moz-osx-font-smoothing: grayscale;
  --f-h1--webkit-font-smoothing: antialiased;
  --f-h1---bold-weight: 500;
}

.f-h1 {
  font-family: var(--f-h1-font-family);
  font-size: var(--f-h1-font-size);
  font-stretch: var(--f-h1-font-stretch);
  font-style: var(--f-h1-font-style);
  font-variant: var(--f-h1-font-variant);
  font-weight: var(--f-h1-font-weight);
  line-height: var(--f-h1-line-height);
  letter-spacing: var(--f-h1-letter-spacing);
  font-feature-settings: var(--f-h1-font-feature-settings);
  -moz-osx-font-smoothing: var(--f-h1--moz-osx-font-smoothing);
  -webkit-font-smoothing: var(--f-h1--webkit-font-smoothing);
  --bold-weight: var(--f-h1---bold-weight);
}

@media (min-width: 650px) {
  :root {
    --f-h1-font-size: 2.25rem;
  }
}

@media (min-width: 990px) {
  :root {
    --f-h1-font-size: 3rem;
  }
}

Similarly for the typeset named h1 we would get classes for each of the other typesets - in this guide that would include f-h2, f-body etc.

Demo

Based on the reference config mentioned in this guide, we would get the following in our CSS:

f-h1 The quick brown fox jumps over the lazy dog

f-h2 The quick brown fox jumps over the lazy dog

f-body The quick brown fox jumps over the lazy dog

document.html

<p class="f-h1">f-h1 The quick brown fox jumps over the lazy dog</p>
<p class="f-h2">f-h2 The quick brown fox jumps over the lazy dog</p>
<p class="f-body">f-body The quick brown fox jumps over the lazy dog</p>

Overriding type styles

AREA 17 have been using responsive typography classes for a number of years on every build we have done, where the number 1 rule has always been "if its a type style, its that type style at all breakpoints". That is, if its our responsive "h1" class, then its the responsive "h1" class at all breakpoints. This rule was initially frustrating but has become the accepted norm at AREA 17. But, it is occasionally still a frustration - usually when it comes to product listing or article listing designs.

Fortunately custom CSS properties helpes us add the ability to override type styles at different breakpoints. For example, the following example displays as a f-h4 on smaller screens and as f-code at larger screens:

f-h4 lg:f-code The quick brown fox jumps over the lazy dog

document.html

<p class="f-h4 lg:f-code">f-h4 md:f-code The quick brown fox jumps over the lazy dog</p>

Note: Unusual font settings may not be overridden, check your settings are correctly overriding.