Headings
Use the following text-{size} utility classes from Tailwind to set the font size for any text element.
Tailwind Elements
Tailwind Elements
Tailwind Elements
Tailwind Elements
Tailwind Elements
Tailwind Elements
<h2 class="font-medium leading-tight text-5xl">Tailwind Elements</h2>
<h2 class="font-medium leading-tight text-4xl">Tailwind Elements</h2>
<h3 class="font-medium leading-tight text-3xl">Tailwind Elements</h3>
<h4 class="font-medium leading-tight text-2xl">Tailwind Elements</h4>
<h5 class="font-medium leading-tight text-xl">Tailwind Elements</h5>
<h6 class="font-medium leading-tight text-base">Tailwind Elements</h6>
Customizing headings
Use the text-gray-500 utility classes to recreate the small secondary heading text.
Fancy display heading With faded secondary text
<h3 class="font-medium leading-tight text-3xl">
Fancy display heading
<small class="text-gray-500">With faded secondary text</small>
</h3>
Display headings
Display heading is useful to make text stand out, and display heading larger with slightly more opinionated style. Heading classes can be applied to any element of a page.
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
<h2 class="text-9xl leading-tight mb-4 pb-4 border-b">Display 1</h2>
<h2 class="text-8xl leading-tight mb-4 pb-4 border-b">Display 2</h2>
<h3 class="text-7xl leading-tight mb-4 pb-4 border-b">Display 3</h3>
<h4 class="text-6xl leading-tight mb-4 pb-4 border-b">Display 4</h4>
<h5 class="text-5xl leading-tight mb-4 pb-4 border-b">Display 5</h5>
<h6 class="text-4xl leading-tight">Display 6</h6>
Lead
Make a paragraph stand out by adding .text-xl.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="text-xl font-light">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est
non commodo luctus.
</p>
Inline text elements
Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content.
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.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p>
<s>This line of text is meant to be treated as no longer accurate.</s>
</p>
<p>
<ins>This line of text is meant to be treated as an addition to the document.</ins>
</p>
<p><u>This line of text will render as underlined</u></p>
<p>
<small>This line of text is meant to be treated as fine print.</small>
</p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
Blockquotes
The .blockquote element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<figure>
<blockquote>
<p class="text-xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
<figcaption class="text-sm text-gray-600">
- Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
Lists
Use the following code to create list items with ordered and unordered lists.
- This is a list.
- It appears completely unstyled.
- Structurally, it's still a list.
- However, this style only applies to immediate child elements.
- Nested lists:
- are unaffected by this style
- will still show a bullet
- and have appropriate left margin
- are unaffected by this style
- will still show a bullet
- and have appropriate left margin
- This may still come in handy in some situations.
<ul>
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
<ul class="list-disc ml-6">
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
<ul class="list-decimal ml-6">
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>
Text alignment
The text-align property is used to set the horizontal alignment of a text. A text can be left or right aligned, centered, or justified.
The following example shows center aligned, and left and right aligned text.
Start aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
End aligned text on all viewport sizes.
Start aligned text on viewports sized SM (small) or wider.
Start aligned text on viewports sized MD (medium) or wider.
Start aligned text on viewports sized LG (large) or wider.
Start aligned text on viewports sized XL (extra-large) or wider.
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">End aligned text on all viewport sizes.</p>
<p class="sm:text-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="sm:text-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="sm:text-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="sm:text-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>
Text wrapping and overflow
Use text-wrap property to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place.
<div class="text-sm text-center font-semibold rounded text-white bg-blue-600 text-wrap w-24">
This text should wrap.
</div>
Text nowrap
<div class="whitespace-nowrap bg-blue-300 w-40">
This text should overflow the parent.
</div>
Text transform
Control text case and capitalization.
Lowercased text.
Uppercased text.
capitalized text.
<p class="lowercase mb-4">Lowercased text.</p>
<p class="uppercase mb-4">Uppercased text.</p>
<p class="capitalize">capitalized text.</p>
Font weight and italics
Change the weight of text or italicize text.
Bold weight text.
Semibold weight text.
Normal weight text.
Light weight text.
Italic text.
<p class="font-bold mb-4">Bold weight text.</p>
<p class="font-semibold mb-4">Semibold weight text.</p>
<p class="font-normal mb-4">Normal weight text.</p>
<p class="font-light mb-4">Light weight text.</p>
<p class="italic">Italic text.</p>
Line height
Use the following leading-{type} utility classes to set the line height for any text element.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
<p class="leading-none mb-4">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="leading-tight mb-4">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="leading-normal mb-4">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="leading-loose">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
If you are looking for more advanced options, try Bootstrap Typography from MDBootstrap.