Typography

Headings

All HTML headings, <h1> through <h6>, are available.

Sample H1 Headings

Sample H1 Headings

Sample H1 Headings

Sample H1 Headings

Sample H1 Headings
Sample H1 Headings

Inline text elements

Styling for common inline HTML5 elements.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Text utilities

Change text alignment, transform, style, weight, line-height, decoration, color and all other properties with Tailwind's text utilities and color utilities.

Font size: https://tailwindcss.com/docs/font-size

Text alignment: https://tailwindcss.com/docs/text-align

Transformhttps://tailwindcss.com/docs/text-transform

Style: https://tailwindcss.com/docs/font-style

Weight: https://tailwindcss.com/docs/font-weight

Line height: https://tailwindcss.com/docs/line-height

Decoration: https://tailwindcss.com/docs/text-decoration

Color: https://tailwindcss.com/docs/text-color

All other properties: https://tailwindcss.com

Blockquotes

Styled Blockquotes using Tailwind's helper classes.

A well-known quote, contained in a blockquote element

Someone famous in Source Title

A well-known quote, contained in a blockquote element

Someone famous in Source Title

A well-known quote, contained in a blockquote element

Someone famous in Source Title

Lists

Ordered and unordered lists are unstyled by default, with no bullets/numbers and no margin or padding. Use List Style Type utility classes to style them.

Unstyled
  • Bananas are berries, but strawberries are not.
  • The moon has moonquakes.
  • The Earth's ozone layer isn't uniform, it's thinner over the equator and thicker over the poles.
  • The first oranges weren't orange.
  • The unicorn is the national animal of Scotland.
list-style-type: disc
  • Bananas are berries, but strawberries are not.
  • The moon has moonquakes.
  • The Earth's ozone layer isn't uniform, it's thinner over the equator and thicker over the poles.
  • The first oranges weren't orange.
  • The unicorn is the national animal of Scotland.
list-style-type: decimal
  • Bananas are berries, but strawberries are not.
  • The moon has moonquakes.
  • The Earth's ozone layer isn't uniform, it's thinner over the equator and thicker over the poles.
  • The first oranges weren't orange.
  • The unicorn is the national animal of Scotland.

Code

Inline code

Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.

For example, <section> should be wrapped as inline.

Code block

Use <pre>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>