@storefront-ui/typography

Customizable typography solution for Tailwind

Create your own typography palette that fits perfectly with the rest of design system.

#TechForUkraine

Russia’s military aggression against Ukraine.

How can you support Ukrainian civil society?

All help is needed. If you are not able to help locally, by sheltering a fellow Ukrainian, you can also:

• Support the Ukraine Armed forces directly by sending funding to the special accounts.
  NBU Special Account to Raise Funds for Ukraine’s Armed Forces
• Help the ICRC (Red Cross) with donations.
  Ukrainian Red Cross Society
• Donate to the United Help Ukraine.
  United Help Ukraine
• Donate to Voices of Children
  Voices of Children

SF Typography

Tailwind plugin that allows you to create fully customizable typography system. Ships with StorefrontUI typography by default.

Made with ❤️ by Alokai team and contributors.

Why?

In many projects the designers specify a standarized range of typography atoms. From headings, body texts to elements like labels - everything follows the same palette of font styles. And whilst Tailwind is great when it comes to dealing with atomic styling we believe that having typography-related classes structured leads to a better developer experience. 💚 That's why we introduce you SF Typography plugin - to bring typography systems back to the Tailwind world!

Installation

npm install --save-dev @storefront-ui/typography

// tailwind.config.ts

import sfTypography from '@storefront-ui/typography';

export default {
  content: ['your-components-source-directory/*.ts'],
  plugins: [sfTypography]
};

And get ready to use default StorefrontUI typography classes that are based on SFUI designs.

How to use it

Every class defined within Tailwind theme configuration can be used in your template with a typography- prefix. You could use default classes as follows:

<h2 class="typography-headline-3">Specifications</h2>

<h3 class="typography-headline-2">Fabric Content</h3>
<p class="typography-text-lg">Cotton blend</p>
<h3 class="typography-headline-2">Sleeve Length Style</h3>
<p class="typography-text-lg">Short sleeve</p>

Customization

Theming

Typography-related styling can be customized as a part of Tailwind theme customization:

Extending default theme

// tailwind.config.ts

import sfTypography from '@storefront-ui/typography';

export default {
  content: ['your-components-source-directory/*.ts'],
  plugins: [sfTypography],

  theme: {
    extend: {
      sfTypography: ({ theme }) => ({
        'headline-2': {
          fontSize: theme('fontSize.4xl'),
          lineHeight: '1.1',
        },
        'headline-8': {
          fontSize: theme('fontSize.xs'),
          lineHeight: theme('lineHeight.4'),
          fontWeight: theme('fontWeight.light')
        },
      })
    }
  }
};

Overriding default theme

You can also specify your own, fully custom typography palette:

// tailwind.config.ts

import sfTypography from '@storefront-ui/typography';

export default {
  content: ['your-components-source-directory/*.ts'],
  plugins: [sfTypography],

  theme: {
    sfTypography: ({ theme }) => ({
      'heading': {
        fontSize: theme('fontSize.4xl'),
        lineHeight: '1.1',
      },
      'label': {
        fontSize: theme('fontSize.xs'),
        lineHeight: theme('lineHeight.4'),
        fontWeight: theme('fontWeight.light')
      },
    })
  }
};

With configuration above, you can start using typography-heading and typography-label classes right away!

Changing classNames prefix

You can change the default prefix typography- by passing configuration options when initializing the plugin:

// tailwind.config.ts

import sfTypography from '@storefront-ui/typography';

export default {
  content: ['your-components-source-directory/*.ts'],
  plugins: [sfTypography({ utilityPrefix: 'custom-text' })]
};

After this change, we can use custom-text- as a className prefix:

<h2 class="custom-text-headline-3">Specifications</h2>

<h3 class="custom-text-headline-2">Fabric Content</h3>
<p class="custom-text-text-lg">Cotton blend</p>

Looking for a library to accelerate your ecommerce development?

Make sure to check out StorefrontUI! Read the documentation at https://docs.storefrontui.io/v2/ 🚀