Tailwind CSS Headings

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

H1

TW elements

HTML

        
            
      <h1 class="mb-2 mt-0 text-5xl font-medium leading-tight text-primary">
        TW elements
      </h1>

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!

H2

TW elements

HTML

        
            
      <h2 class="mb-2 mt-0 text-4xl font-medium leading-tight text-primary">
        TW elements
      </h2>

H3

TW elements

HTML

        
            
      <h3 class="mb-2 mt-0 text-3xl font-medium leading-tight text-primary">
        TW elements
      </h3>

H4

TW elements

HTML

        
            
      <h4 class="mb-2 mt-0 text-2xl font-medium leading-tight text-primary">
        TW elements
      </h4>

H5

TW elements

HTML

        
            
      <h5 class="mb-2 mt-0 text-xl font-medium leading-tight text-primary">
        TW elements
      </h5>

H6

TW elements

HTML

        
            
      <h6 class="mb-2 mt-0 text-base font-medium leading-tight text-primary">
        TW elements
      </h6>

Headings

Tailwind CSS Headings

H1

TW elements

H2

TW elements

H3

TW elements

H4

TW elements

H5

TW elements

H6

TW elements

Access restricted

To view this section you must have an active PRO account

Headings

Tailwind CSS Headings

H1

TW elements

H2

TW elements

H3

TW elements

H4

TW elements

H5

TW elements

H6

TW elements

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):