Headings
Use the following text-{size} utility classes from Tailwind to
set the font size for any text element.
TW elements
TW elements
TW elements
TW elements
TW elements
TW elements
Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!
Customizing headings
Use the text-neutral-500 utility classes to recreate the small
secondary heading text.
Fancy display heading With faded secondary text
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
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.
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.
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.
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.
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.
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.
Text nowrap
Text transform
Control text case and capitalization.
Lowercased text.
Uppercased text.
capitalized text.
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.
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.