search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Migrating to v2
      • Internationalization guide
      • Class customization
      • Icons Integration
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Angular
      • ASP.NET
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • Qwik
      • React
      • Remix
      • Solid
      • Svelte
      • SvelteKit
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Autocomplete
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Multi range slider
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Admin Charts
      • Admin Complex
      • Admin Forms
      • Admin Maps
      • Admin Navigation
      • Admin tables
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Stats admin
      • Team
      • Testimonials
    • Tools
      • Button generator
      • Card generator
      • Flexbox generator
      • Footer generator
      • Form builder
      • Grid generator
      • Icon generator
      • Instagram Filters generator
      • Logo generator
      • Table generator
      • Typography generator
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • Resources
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips

    Typography

    Tailwind CSS Typography

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


    Headings

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

    TW Elements

    TW Elements

    TW Elements

    TW Elements

    TW Elements
    TW Elements
    • HTML
            
                
          <h1 class="text-5xl font-medium leading-tight">TW Elements</h1>
          <h2 class="text-4xl font-medium leading-tight">TW Elements</h2>
          <h3 class="text-3xl font-medium leading-tight">TW Elements</h3>
          <h4 class="text-2xl font-medium leading-tight">TW Elements</h4>
          <h5 class="text-xl font-medium leading-tight">TW Elements</h5>
          <h6 class="text-base font-medium leading-tight">TW Elements</h6>
    
          
            
        

    Hey there 👋 we're excited about TW elements 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-surface/75 dark:text-white/75 utility classes to recreate the small secondary heading text.

    Fancy display heading With faded secondary text

    • HTML
            
                
          <h3 class="text-3xl font-medium leading-tight">
            Fancy display heading
            <small class="text-surface/75 dark:text-white/75"
              >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
    • HTML
            
                
          <h1 class="mb-4 border-b pb-4 text-9xl leading-tight">Display 1</h1>
          <h2 class="mb-4 border-b pb-4 text-8xl leading-tight">Display 2</h2>
          <h3 class="mb-4 border-b pb-4 text-7xl leading-tight">Display 3</h3>
          <h4 class="mb-4 border-b pb-4 text-6xl leading-tight">Display 4</h4>
          <h5 class="mb-4 border-b pb-4 text-5xl leading-tight">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.

    • HTML
            
                
          <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.

    • HTML
            
                
          <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
    • HTML
            
                
          <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-neutral-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.
    • HTML
            
                
          <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="ms-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 class="ms-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.

    • HTML
            
                
          <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.
    • HTML
            
                
          <div
            class="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.
    • HTML
            
                
          <div class="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.

    • HTML
            
                
          <p class="mb-4 lowercase">Lowercased text.</p>
          <p class="mb-4 uppercase">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.

    • HTML
            
                
          <p class="mb-4 font-bold">Bold weight text.</p>
          <p class="mb-4 font-semibold">Semibold weight text.</p>
          <p class="mb-4 font-normal">Normal weight text.</p>
          <p class="mb-4 font-light">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.

    • HTML
            
                
          <p class="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 class="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 class="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 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>
          
            
        

    Related resources

    Tutorials:

    colors flexbox text lists cards pricing cards sizing forms footer

    Extended Docs:

    colors figures headings link list group paragraphs testimonials textarea center text colors gradient text letter spacing paragraph spacing parallax text bold text color text decoration text ellipsis text shadow text size text truncate text wrap vertically align text

    Generators and builders:

    Form drag & drop Typography SVG icon Instagram Filters button card table flexbox logo grid footer

    Design System (Figma):

    introduction less is more de emphasize with no mercy size matters label overload low contrast vs low aesthetics beyond borders let it breathe user experience primary questions project personality design system plan the process principles tips and tricks
    • Headings
    • Customizing headings
    • Display headings
    • Lead
    • Inline text elements
    • Blockquotes
    • Lists
    • Text alignment
    • Text wrapping and overflow
    • Text nowrap
    • Text transform
    • Font weight and italics
    • Line height
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2024 Copyright: MDBootstrap.com

    Access restricted

    To view this section you must have an active PRO account

    Log in to your account or purchase an TWE subscription if you don't have one.

    Buy TWE PRO