Alternates

¶Usage

These utilities provide access to OpenType alternate glyph features not currently available via the higher-level CSS properties. For other alternate glyph features, use the Font Variant Alternates utilities.

¶Stylistic alternates

salt

Sometimes a significant portion of a typeface’s unique character comes from a few specific glyphs. Stylistic Alternates offer an opportunity to change these, and change the tone of the typeface.

<p class="salt">Easy like Sunday morning & fox</p>

¶Stylistic sets

ss01–ss20

This feature replaces sets of default character glyphs with stylistic variants. Glyphs in stylistic sets may be designed to harmonise visually, interact in particular ways, or otherwise work together.

<p class="ss-02">Illegal</p>

Note that fonts may employ stylistic sets in completely arbitrary and individual ways. In this example, Inter uses ss02 to change a series of glyphs into less ambiguous forms, but the same stylistic set in another font could produce completely different changes.

The OpenType spec allows for as many as 20 different sets to be defined in a font; by default this plugin includes utilities for ss01 through ss04. To add additional sets or to change the label of the utility class for specific sets, use the stylisticSets key in your theme or extends config.

// tailwind.config.js
module.exports = {
    theme: {
        stylisticSets: {
            'open-digits': 'ss01',
            disambiguate: 'ss02',
            'curved-r': 'ss03',
        },
        extend: {
            stylisticSets: {
                '04': 'ss04',
            },
        },
    },
}