Skip to content

Latest commit

 

History

History
115 lines (95 loc) · 3.89 KB

README.md

File metadata and controls

115 lines (95 loc) · 3.89 KB
Raw

Tailwind Fluid Typography

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

npm i tailwind-fluid-typography
// or
yarn add tailwind-fluid-typography

// tailwind.config.js
module.exports = {
  theme: {
    fluidTypography: {},
  },
  plugins: [require("tailwind-fluid-typography")],
};

Usage

<h1 class="fluid-4xl">Fluid Typography @ 4XL</h1>
<h2 class="fluid-3xl">Fluid Typography @ 3XL</h2>
<h3 class="fluid-2xl">Fluid Typography @ 2XL</h3>
<h4 class="fluid-xl">Fluid Typography @ XL</h4>
<h5 class="fluid-lg">Fluid Typography @ LG</h5>
<h6 class="md:fluid-lg">Fluid Typography @ LG</h6>
<p class="fluid-base">Fluid Typography</p>
<p class="fluid-sm">Fluid Typography @ SM</p>
<small class="fluid-xs">Fluid Typography @ XS</small>

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:

theme: {
    fluidTypography: {
        remSize: 14,
        minScreenSize: 600,
        maxScreenSize: 1280,
        minTypeScale: 1.250,
        maxTypeScale: 1.618,
        lineHeight: 1.5
    }
}

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:

@layer utilities {
	.fluid-prose {
		:where(h1) {
			@apply fluid-5xl mb-0;
		}
		:where(h2) {
			@apply fluid-4xl mb-0;
		}
		:where(h3) {
			@apply fluid-3xl mb-0;
		}
		:where(h4) {
			@apply fluid-2xl mb-0;
		}
		:where(h5) {
			@apply fluid-xl mb-0;
		}
		:where(h6) {
			@apply fluid-lg mb-0;
		}
	}
}

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 <h1>-style rule.