Tailwind CSS React Paragraphs

Use responsive paragraphs component with helper examples for lead, quote, small, inline text elements & more.

Basic

Paragraphs are defined with the <p></p> 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.

        
            
      import React from 'react';

      export default function App() {
        return (
            <p className="mb-4 mt-0 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're excited about TW Elements for React and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Lead

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

        
            
      import React from 'react';

      export default function App() {
        return (
            <p className="mb-4 mt-6 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.

        
            
      import React from 'react';

      export default function App() {
        return (
            <p className="mb-0 mt-0 text-base font-light leading-relaxed">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
                erat a ante.
            </p>
            <footer className="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.

        
            
      import React from 'react';

      export default function App() {
        return (
            <small className="mb-4 mt-0 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.

        
            
      import React from 'react';

      export default function App() {
        return (
            <p>
                You can use the mark tag to
                <mark className="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