Tailwind CSS Paragraphs

Use responsive paragraphs component with helper examples for lead, quote, small, inline text elements & more. Free download, open-source 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.

HTML

        
            
      <p class="mt-0 mb-4 text-base font-light leading-relaxed">
        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>

Hey there 👋 we want to make Tailwind 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!

Share via Reddit Share via StumbleUpon

Lead

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

HTML

        
            
      <p class="mt-6 mb-4 text-xl font-light leading-relaxed">
        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.

HTML

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

Small

Use .text-normal class to make text small.

HTML

        
            
      <small class="mt-0 mb-4 font-normal leading-normal">
        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.

HTML

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

Paragraphs

Basic

Lead

Quote

Small

Inline text elements

Related resources