Picture of the authorTechstackkit

#web development
#headings
#tailwind css
#tailwind classes

How to Style Headings using Tailwind CSS classes

Anonymous

AnonymousJan 08, 2024

Tailwind CSS Headings 

Using Tailwind CSS, responsive headings are created. To adjust the text's size, weight, and appearance, use various typography classes.

<h1 class="mt-5 text-center text-5xl font-bold text-purple-800">Heading H1</h1>

<h2 class="mt-5 text-center text-4xl font-bold text-purple-800">Heading H2</h2>

<h3 class="mt-5 text-center text-3xl font-bold text-purple-800">Heading H3</h3>

<h4 class="mt-5 text-center text-2xl font-bold text-purple-800">Heading H4</h4>

<h5 class="mt-5 text-center text-xl font-bold text-purple-800">Heading H5</h5>

<h6 class="mt-5 text-center text-lg font-bold text-purple-800">Heading H6</h6>

Full Code of these headings:


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <h1 class="mt-5 text-center text-5xl font-bold text-purple-800">Heading H1</h1>
  <h2 class="mt-5 text-center text-4xl font-bold text-purple-800">Heading H2</h2>
  <h3 class="mt-5 text-center text-3xl font-bold text-purple-800">Heading H3</h3>
  <h4 class="mt-5 text-center text-2xl font-bold text-purple-800">Heading H4</h4>
  <h5 class="mt-5 text-center text-xl font-bold text-purple-800">Heading H5</h5>
  <h6 class="mt-5 text-center text-lg font-bold text-purple-800">Heading H6</h6>
</body>
</html>

Happy Coding 😎