Tailwind CSS Typography

Customise your web projects with our amazing Tailwind CSS headings!

The headings are titles or subtitles that you want to display on a webpage. They communicate the organization of the content and guide the users on the page.

Below we are presenting 6 levels of headings that you can use in your Tailwind CSS project. The examples come in different colors so you can adapt them easily to your needs.


h1. Tailwind CSS heading

h2. Tailwind CSS heading

h3. Tailwind CSS heading

h4. Tailwind CSS heading

h5. Tailwind CSS heading
h6. Tailwind CSS heading
<h1>h1. Tailwind CSS heading</h1>
<h2>h2. Tailwind CSS heading</h2>
<h3>h3. Tailwind CSS heading</h3>
<h4>h4. Tailwind CSS heading</h4>
<h5>h5. Tailwind CSS heading</h5>
<h6>h6. Tailwind CSS heading</h6>

Typography Colors

The alert component comes with different colors that you can change it using the class names, below there are some examples of the colors:

Material Tailwind

Material Tailwind

Material Tailwind

Material Tailwind

Material Tailwind

Material Tailwind

<h1 class="text-pink-500">Material Tailwind</h1>
<h1 class="text-blue-500">Material Tailwind</h1>
<h1 class="text-green-500">Material Tailwind</h1>
<h1 class="text-orange-500">Material Tailwind</h1>
<h1 class="text-red-500">Material Tailwind</h1>
<h1 class="text-dark-500">Material Tailwind</h1>

Tailwind CSS Paragraph

Use our Tailwind CSS paragraph example for displaying long text.

Use our Tailwind CSS paragraph example for displaying long text.

<p>Use our Tailwind CSS paragraph example for displaying long text. </p>
Edit this page on Github