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.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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.
Body text
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Duis mollis, est non commodo luctus.Duis mollis, est non commodo luctus.
Small text
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Duis mollis, est non commodo luctus.Duis mollis, est non commodo luctus.Muted text
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Duis mollis, est non commodo luctus.Duis mollis, est non commodo luctus.
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.
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.
Gradient text
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.
You see this old vinyl record, weathered and worn, its label scratched and faded? At first glance, it may appear as nothing more than discarded junk. Yet, to me, it holds something infinitely precious—the sound of my childhood. It's not just music; it's a treasure trove of memories, each groove on its surface a testament to days gone by. As I gently place the needle onto its surface, I am transported back to a time when summer nights stretched on forever, filled with the warmth of family gatherings and pop that emanates from the speakers is like a whisper from the past, a nostalgic echo of moments I hold dear.
Conditional application of styles based on the open state of either a <details> or <dialog> element.
How did paperclips come to be?
The humble paperclip has an interesting history. It was first patented in the late 19th century by Norwegian inventor Johan Vaaler, although the exact origin of the paperclip dates back even earlier to other similar designs.
