Typography

All defined in one file

By default we should have typography classes defined in one file and we reference and extend them throughout the site where needed.

Default tailwind text size classes

We don't really use the default tailwind text-2xl,3xl,md,sm because they confuse things when working against the figma file, so generally use .text-h1/h2/h3 etc. For more single use cases with font sizes that aren't supported by text-h1,h2,h3 etc. we use .text-{pixelfontsize} e.g. 'text-14px'.

Tailwind setup

We use generic font classes that we define in tailwind.config.js, so instead of font-moderat we'd use font-heading or font-body. This also means that we can port this file over to a new project more easily without having to update font name classes.

Tailwind responsive

TO UPDATE