1. Docs
  3. Typography

Typography

Styles for headings, paragraphs, lists...etc

Installation

typography.css
@utility heading-1 {
  @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
}

@utility heading-2 {
  @apply scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0;
}

@utility heading-3 {
  @apply scroll-m-20 text-2xl font-semibold tracking-tight;
}

@utility heading-4 {
  @apply scroll-m-20 text-xl font-semibold tracking-tight;
}

@utility p {
  @apply leading-7 not-first:mt-6;
}

@utility blockquote {
  @apply mt-6 border-l-2 pl-6 italic;
}
globals.css
@import "tailwindcss";
@import "./typography.css";

Examples

h1

Taxing Laughter: The Joke Tax Chronicles

h2

The People of the Kingdom

h3

The Joke Tax

h4

People stopped telling jokes

p

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.

blockquote

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
AstroAccordion