Tailwind Paragraphs component

Responsive paragraphs built with Tailwind. Use different typography classes to change the size, weight and appearance of the text. Free download, MIT license.


Basic

Paragraphs are defined with the

tag. Paragraph tag is a very basic and typically the first tag you will need to publish your text on the web pages.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, libero iste quod quibusdam maxime recusandae odit eveniet, aspernatur culpa provident error molestiae vitae corporis in vero est! Beatae, ipsum voluptatibus.

        
            
      <p class="text-base font-light leading-relaxed mt-0 mb-4 text-gray-800">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, libero iste quod quibusdam maxime recusandae odit eveniet, aspernatur culpa provident error molestiae vitae corporis in vero est! Beatae, ipsum voluptatibus.
      </p>

      
        
    

Lead

Make a paragraph stand out by adding .text-xl.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, libero iste quod quibusdam maxime recusandae odit eveniet, aspernatur culpa provident error molestiae vitae corporis in vero est! Beatae, ipsum voluptatibus.

        
            
      <p class="text-xl font-light leading-relaxed mt-6 mb-4 text-gray-800">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, libero iste quod quibusdam maxime recusandae odit eveniet, aspernatur culpa provident error molestiae vitae corporis in vero est! Beatae, ipsum voluptatibus.
      </p>

      
        
    

Quote

Use a quotation on your website adding .text-base.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

- Someone famous in Source Title
        
            

      <p class="text-base font-light leading-relaxed mt-0 mb-0 text-gray-800">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
        erat a ante.
      </p>
      <footer class="block text-gray-600">
        - Someone famous in <cite>Source Title</cite>
      </footer>

      
        
    

Small

Use .text-normal class to make text small.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, libero iste quod quibusdam maxime recusandae odit eveniet, aspernatur culpa provident error molestiae vitae corporis in vero est! Beatae, ipsum voluptatibus.
        
            
      <small class="font-normal leading-normal mt-0 mb-4 text-gray-800">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, libero iste quod quibusdam maxime recusandae odit eveniet, aspernatur culpa provident error molestiae vitae corporis in vero est! Beatae, ipsum voluptatibus.
      </small>
      
        
    

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.

        
            
      <p>You can use the mark tag to <mark class="bg-blue-200">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>
      
        
    

If you are looking for more advanced options, try Bootstrap Typography from MDBootstrap.