HTML Template

Building Your Starter Template

Every Tailwind project starts with a well-structured HTML file. In this tutorial, we will create a reusable starter template and explore the essential utility classes you will use in every project.

The Base Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Starter</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="min-h-screen bg-gray-50 text-gray-800">

  <!-- Header -->
  <header class="bg-white shadow">
    <nav class="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
      <a href="#" class="text-xl font-bold text-indigo-600">MySite</a>
      <ul class="flex space-x-6 text-sm font-medium">
        <li><a href="#" class="hover:text-indigo-600">Home</a></li>
        <li><a href="#" class="hover:text-indigo-600">About</a></li>
        <li><a href="#" class="hover:text-indigo-600">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main Content -->
  <main class="max-w-6xl mx-auto px-4 py-12">
    <h1 class="text-4xl font-extrabold mb-4">Welcome to my site</h1>
    <p class="text-lg text-gray-600 leading-relaxed max-w-2xl">
      This is a starter template built with Tailwind CSS.
      Every class you see here is a utility provided by the framework.
    </p>
  </main>

  <!-- Footer -->
  <footer class="bg-gray-800 text-gray-300 mt-auto">
    <div class="max-w-6xl mx-auto px-4 py-6 text-center text-sm">
      &copy; 2025 MySite. Built with Tailwind CSS.
    </div>
  </footer>

</body>
</html>

Breaking Down the Key Classes

Layout & Sizing

Class	What It Does
`min-h-screen`	Sets the minimum height to 100vh (full viewport height)
`max-w-6xl`	Caps the element's max width at 72rem (1152px)
`mx-auto`	Centers an element horizontally using auto margins
`px-4`	Adds 1rem (16px) of horizontal padding
`py-12`	Adds 3rem (48px) of vertical padding

Typography

Class	What It Does
`text-xl`	Sets font-size to 1.25rem
`text-4xl`	Sets font-size to 2.25rem
`font-bold`	Sets font-weight to 700
`font-extrabold`	Sets font-weight to 800
`font-medium`	Sets font-weight to 500
`text-sm`	Sets font-size to 0.875rem
`leading-relaxed`	Sets line-height to 1.625

Colors

Class	What It Does
`bg-gray-50`	Very light gray background
`text-gray-800`	Dark gray text
`text-indigo-600`	Indigo colored text
`bg-gray-800`	Dark gray background (footer)
`text-gray-300`	Light gray text

Flex Utilities

Class	What It Does
`flex`	Activates flexbox on the container
`items-center`	Vertically centers flex children
`justify-between`	Distributes children with space between them
`space-x-6`	Adds 1.5rem horizontal gap between children

The Utility-First Workflow

With Tailwind, your workflow is simple:

Write HTML — Structure your content semantically.
Add utility classes — Style each element inline with Tailwind classes.
Preview in browser — The --watch flag rebuilds CSS on every save.
Iterate — Adjust classes until the design looks right.

There is no separate CSS file to maintain. You spend your time in HTML, composing utilities, and seeing instant results.

Adding More Sections

Let us add a simple hero section and a feature grid to our template:

<!-- Hero Section -->
<section class="bg-indigo-600 text-white py-20">
  <div class="max-w-4xl mx-auto text-center px-4">
    <h2 class="text-5xl font-extrabold mb-6">Build Beautiful UIs</h2>
    <p class="text-xl text-indigo-100 mb-8">
      A utility-first approach to modern web design.
    </p>
    <a href="#" class="bg-white text-indigo-600 font-semibold px-6 py-3 rounded-lg hover:bg-indigo-50">
      Get Started
    </a>
  </div>
</section>

<!-- Features -->
<section class="max-w-6xl mx-auto px-4 py-16">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="text-lg font-bold mb-2">Fast</h3>
      <p class="text-gray-600">Tiny CSS bundles with automatic purging.</p>
    </div>
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="text-lg font-bold mb-2">Flexible</h3>
      <p class="text-gray-600">Build any design without leaving your HTML.</p>
    </div>
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="text-lg font-bold mb-2">Modern</h3>
      <p class="text-gray-600">Responsive, dark mode, and state variants built in.</p>
    </div>
  </div>
</section>

Recap

A Tailwind template uses standard HTML with utility classes for all styling.
Key layout classes: max-w-*, mx-auto, px-*, py-*.
Typography, colors, and flex are all applied via class attributes.
The workflow is HTML-centric — no separate stylesheet files to manage.

In the next tutorial, we will dive deeper into Tailwind's font and color systems.