Tailwind Typography component

Responsive Typography built with Tailwind CSS. Use different typography classes to change the leading & the decoration of the text. Free download, MIT license.


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.

- Someone famous in Source Title
        
            
      <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.

This text should wrap.
        
            
      <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

This text should overflow the parent.
        
            
      <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.