Content
Typography
A comprehensive guide to typography, featuring examples of global settings, headings, body text, lists, and various other elements.
Font sizes
Headings
Use of Tailwind CSS <a href="https://tailwindcss.com/docs/font-size" target="_blank" class="link link-primary">font size</a> utility classes to style various headings.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph
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.
Semantic tags
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.
Misc
Gradient text
Use the classes `bg-clip-text`, `text-transparent`, and `bg-linear-{tw-utility-class}` to achieve a gradient overlay effect on a text element.
Gradient text
First-line and first-letter
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.
Open/closed state
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.
Text color
Use these text color utilities to automatically apply the correct text color based on the background or border color. This ensures good contrast and readability across different components and themes.
This uses text-primary-content on a bg-primary background: text-bg-primary
This uses text-primary-content on a bg-soft-primary background: text-bg-soft-primary
This uses text-primary-content alongside a border-primary: text-border-primary
Semantic gradient background
Use these semantic gradient background classes to create a smooth left-to-right gradient. The gradient starts with the semantic color on the left and transitions to a 20% darker shade on the right. This helps add depth and visual interest while maintaining consistency with your theme colors.
Use these semantic gradient background classes to create a smooth left-to-right gradient. The gradient starts with the semantic color on the left and transitions to a 20% darker shade on the right. This helps add depth and visual interest while maintaining consistency with your theme colors.