content

Tailwind CSS Typography

A comprehensive guide to typography, featuring examples of global settings, headings, body text, lists, and various other elements.


Inter is used for FlyonUI docs. To change or customize this, consult the font-family section in the TailwindCSS documentation.

Use of Tailwind CSS font size utility classes to style various headings.

The <p> tag is extensively employed in HTML documents for composing longer passages of text, typically separated by blank lines. Adhering to proper usage of this tag can notably improve on-page SEO performance.

Styling for common inline HTML5 elements.

ELEMENT (TAG)
DESCRIPTION
<mark>Used to highlight or mark text for emphasis or reference.
<del>Indicates text that should be treated as deleted or removed from the document.
<s>Represents text that is no longer relevant or accurate.
<ins>Marks text that has been added to the document.
<u>Renders text with an underline to indicate emphasis or annotation.
<small>Denotes text that should be displayed in a smaller font size, often used for fine print or side comments.
<strong>Renders text in a bold font to denote strong importance or emphasis.
<em>Renders text in italics to indicate emphasis or stress.

These HTML5 elements offer semantic significance to the content, effectively communicating specific intentions to both users and search engines.

Use the classes bg-clip-text, text-transparent, and bg-gradient-{tw-utility-class} to achieve a gradient overlay effect on a text element.

Apply styles to the initial line of a text block using the ::first-line pseudo-element, and to the first letter with the ::first-letter pseudo-element.

Conditional application of styles based on the open state of either a <details> or <dialog> element.