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.

New in v3.9.0 - overriding 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(--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(--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(--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 {
  --sans: SuisseIntl, Helvetica, Arial, sans-serif;
  --serif: "Times New Roman", Georgia, serif;
  --mono: "Lucida Console", Courier, monospace;
  --f-h1-font-family: var(--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

Introduced in v3.9.0.

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.

v3.9.0 brings 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>

Overriding caveat - only versions before `v4.0.3`

Note: this caveat was fixed in v4.0.3.

This typography plugin sets common typography values to initial:

.defaults {
  font-family: initial;
  font-size: initial;
  font-stretch: initial;
  font-style: initial;
  font-variant: initial;
  font-weight: initial;
  line-height: initial;
  letter-spacing: initial;
  font-feature-settings: initial;
  -moz-osx-font-smoothing: initial;
  -webkit-font-smoothing: initial;
  --bold-weight: initial;
}

Only these settings will be overridden when using responsive override classes.

It is possible to set other font type attributes such as font-size-adjust when setting up your typography classes: