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

Headings

Use the following text-{size} utility classes from Tailwind to set the font size for any text element.

TW Elements

        
            
      import React from 'react';

      export default function App() {
        return (
          <>
            <h1 className="text-5xl font-medium leading-tight">TW Elements</h1>
            <h2 className="text-4xl font-medium leading-tight">TW Elements</h2>
            <h3 className="text-3xl font-medium leading-tight">TW Elements</h3>
            <h4 className="text-2xl font-medium leading-tight">TW Elements</h4>
            <h5 className="text-xl font-medium leading-tight">TW Elements</h5>
            <h6 className="text-base font-medium leading-tight">TW Elements</h6>
          </>
        );
      }

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!

Customizing headings

Use the text-neutral-500 utility classes to recreate the small secondary heading text.

Fancy display heading With faded secondary text

        
            
      import React from 'react';

      export default function App() {
        return (
            <h3 className="text-3xl font-medium leading-tight">
              Fancy display heading
              <small className="text-neutral-500 dark:text-neutral-400">
                  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

        
            
      import React from 'react';

      export default function App() {
        return (
            <h1 className="mb-4 border-b pb-4 text-9xl leading-tight">Display 1</h1>
            <h2 className="mb-4 border-b pb-4 text-8xl leading-tight">Display 2</h2>
            <h3 className="mb-4 border-b pb-4 text-7xl leading-tight">Display 3</h3>
            <h4 className="mb-4 border-b pb-4 text-6xl leading-tight">Display 4</h4>
            <h5 className="mb-4 border-b pb-4 text-5xl leading-tight">Display 5</h5>
            <h6 className="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.

        
            
      import React from 'react';

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

        
            
      import React from 'react';

      export default function App() {
        return (
            <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

        
            
      import React from 'react';

      export default function App() {
        return (
            <figure>
              <blockquote>
                <p className="text-xl">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
                  posuere erat a ante.
                </p>
              </blockquote>
              <figcaption className="text-sm text-neutral-600 dark:text-neutral-400">
                - 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.

        
            
      import React from 'react';

      export default function App() {
        return (
        <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 className="ml-6 list-disc">
                <li>are unaffected by this style</li>
                <li>will still show a bullet</li>
                <li>and have appropriate left margin</li>
            </ul>
            <ul className="ml-6 list-decimal">
                <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.

        
            
      import React from 'react';

      export default function App() {
        return (
            <p className="text-start">Start aligned text on all viewport sizes.</p>
            <p className="text-center">Center aligned text on all viewport sizes.</p>
            <p className="text-right">End aligned text on all viewport sizes.</p>

            <p className="sm:text-start">
                Start aligned text on viewports sized SM (small) or wider.
            </p>
            <p className="sm:text-start">
                Start aligned text on viewports sized MD (medium) or wider.
            </p>
            <p className="sm:text-start">
                Start aligned text on viewports sized LG (large) or wider.
            </p>
            <p className="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.

        
            
      import React from 'react';

      export default function App() {
        return (
            <div className="text-wrap w-24 rounded bg-primary text-center text-sm font-semibold text-white">
                This text should wrap.
            </div>  
        );
      }

Text nowrap

This text should overflow the parent.

        
            
      import React from 'react';

      export default function App() {
        return (
            <div className="w-40 whitespace-nowrap bg-primary-300 dark:bg-primary-500">
                This text should overflow the parent.
            </div>  
        );
      }

Text transform

Control text case and capitalization.

Lowercased text.

Uppercased text.

capitalized text.

        
            
      import React from 'react';

      export default function App() {
        return (
            <p className="mb-4 lowercase">Lowercased text.</p>
            <p className="mb-4 uppercase">Uppercased text.</p>
            <p className="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.

        
            
      import React from 'react';

      export default function App() {
        return (
            <p className="mb-4 font-bold">Bold weight text.</p>
            <p className="mb-4 font-semibold">Semibold weight text.</p>
            <p className="mb-4 font-normal">Normal weight text.</p>
            <p className="mb-4 font-light">Light weight text.</p>
            <p className="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.

        
            
      import React from 'react';

      export default function App() {
        return (
            <p className="mb-4 leading-none">
                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 className="mb-4 leading-tight">
                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 className="mb-4 leading-normal">
                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 className="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.

Typography

Tailwind CSS React Typography

Headings

TW Elements

TW Elements

TW Elements

TW Elements

TW Elements

TW Elements

Customizing headings

Fancy display heading With faded secondary text

Display headings

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Lead

Inline text elements

Blockquotes

Lists

Text alignment

Text wrapping and overflow

Text nowrap

Text transform

Font weight and italics

Line height

Related resources