tailwind-fluid-typography weekly downloads statistics

Tailwind Fluid Typography

Based on the fluid typography theory devised by Mike Riethmuller and incorporating ideas from Google's Material Design spec, Tailwind Fluid Typography gives you a new set of utility classes that scale modularly depending on screen size.

• Set breakpoints for when your type should start and stop scaling • Dual scaling system gives you the ability to set your desired scale for your lower breakpoint and for your higher breakpoint • Provides xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl and 9xl font-sizes

Installation

Usage

Customisation

To customise the plugin settings, you can pass the following properties as part of a fluidTypography property on theme:

| Name | Type | Default | Description |

| remSize | Number | 16 | The px size to assume for 1rem ( *reference only ) | | minScreenSize | Number | 320 | The screen size (in px) at which to begin scaling | | maxScreenSize | Number | 1920 | The screen size (in px) at which to stop scaling | | minTypeScale | Number | 1.2 | The scaling factor to use at minScreenSize | | maxTypeScale | Number | 1.333 | The scaling factor to use at maxScreenSize | | lineHeight | Number | 1.35 | The line-height to use for heading classes |

• remSize is required as configuration for Tailwind to setup fluid typography classes. It does not change your actual html base REM size, you must do this yourself.

For example:

Suggested type scales

| | | |

| Minor Second | 1.067 | | | Major Second | 1.125 | | | Minor Third | 1.200 | default minTypeScale | | Major Third | 1.250 | | | Perfect Fourth | 1.333 | default maxTypeScale | | Augmented Fourth | 1.414 | | | Perfect Fifth | 1.500 | | | Golden Ratio | 1.618 | |

Fluid Prose

At times, you may need to render fluid typography of which you don't have direct control over the classes. Because the style requirements of this vary greatly between sites, we haven't included the functionality in the plugin itself, but it is easily implemented in your own Tailwind stylesheet:

In case you were wondering, the :where selector comes with a CSS specificity of 0, so it is more easily overridden by other utility/custom classes than a normal -style rule.