Lesson 6 of the Tailwind CSS: Utility-First Styling from Scratch course

CSSJuly 17, 20263 min read

Project Setup and Hero Structure: Building with Tailwind CSS

Q: What if my layout doesn't look like the code?

Ensure your Tailwind CLI process is running (npm run dev) and that your dist/output.css is actually being generated and linked correctly in your .

Learn to organize your project structure and build a semantic hero section using Tailwind CSS utility classes to create a solid foundation for your site.

Tailwind CSSHTMLWeb DevelopmentLayoutProject Structure

Previously in this course, we covered Understanding the Tailwind CLI to manage our build pipeline and Mastering Spacing and Sizing to control the layout. Now that your environment is ready, we’ll move from theory to practice by establishing a clean project structure and building the "Hero" section—the first thing your users see.

Establishing Professional Project Structure

Before writing a single line of HTML, you need a predictable directory structure. In professional frontend development, consistency prevents "file soup," where assets and source files become impossible to track.

For this course, we will maintain a simple but scalable layout. Create a new folder for your project and organize it as follows:


TEXT
/my-marketing-site
├── /dist          # Compiled CSS and final assets
├── /src
│   ├── input.css  # Your Tailwind directives
│   └── index.html # Main landing page
├── tailwind.config.js
└── package.json

By keeping your source code in src/, you clearly separate your development work from the final production build. This mirrors the standard setup you'd see when Setting Up the Project Environment: A Professional Foundation in any modern web application.

Structuring the Semantic Hero Section

The hero section is the most important part of your marketing page. From an HTML perspective, it should be wrapped in a <section> tag to provide semantic meaning to browsers and screen readers.

Inside the index.html file, we'll establish our skeleton:


HTML
<!DOCTYPE html>
style="color:#808080"><style="color:#4EC9B0">html lang="en">
style="color:#808080"><style="color:#4EC9B0">head>
    style="color:#808080"><style="color:#4EC9B0">meta charset="UTF-8">
    style="color:#808080"><style="color:#4EC9B0">meta name="viewport" content="width=device-width, initial-scale=1.0">
    style="color:#808080"><style="color:#4EC9B0">title>My Marketing Sitestyle="color:#808080"></style="color:#4EC9B0">title>
    style="color:#808080"><style="color:#4EC9B0">link href="../dist/output.css" rel="stylesheet">
style="color:#808080"></style="color:#4EC9B0">head>
style="color:#808080"><style="color:#4EC9B0">body>
    style="color:#808080"><style="color:#4EC9B0">section class="bg-gray-50 py-20 px-6">
        style="color:#808080"><style="color:#4EC9B0">div class="max-w-4xl mx-auto text-center">
            style="color:#808080"><style="color:#4EC9B0">h1 class="text-4xl font-bold text-gray-900">
                Building Your Future, One Utility at a Time
            style="color:#808080"></style="color:#4EC9B0">h1>
            style="color:#808080"><style="color:#4EC9B0">p class="mt-4 text-lg text-gray-600">
                A professional-grade marketing site built with Tailwind CSS.
            style="color:#808080"></style="color:#4EC9B0">p>
        style="color:#808080"></style="color:#4EC9B0">div>
    style="color:#808080"></style="color:#4EC9B0">section>
style="color:#808080"></style="color:#4EC9B0">body>
style="color:#808080"></style="color:#4EC9B0">html>

Applying Utility Classes for Layout

We’ve used a few key utilities here to handle the layout without writing custom CSS:

bg-gray-50: Sets a subtle background color to distinguish the section.
py-20: Adds vertical padding to give the content "breathing room."
max-w-4xl: Constrains the content width so the text doesn't stretch too far on wide screens, improving readability.
mx-auto: Uses auto-margins to center the container within the parent.

Hands-on Exercise: Build Your Own Hero

Open your index.html file.
Add a button element (<button>) inside the div below the paragraph.
Style it using bg-blue-600, text-white, px-6, py-2, and rounded-lg.
Add a mt-8 class to the button to provide spacing from the paragraph above it.

Common Pitfalls

Forgetting max-w: Beginners often let text span the full width of the screen. Always constrain your container widths to keep line lengths readable.
Mixing CSS and Utilities: If you find yourself reaching for a custom CSS file to fix a layout issue, pause. Almost every common layout pattern (centering, spacing, sizing) can be achieved with Tailwind's utility classes.
Semantic Overload: Don't replace div with section or article unless it actually represents a distinct section of content. Over-tagging can confuse screen readers as much as under-tagging.

FAQ

Why use <section> instead of a <div>?
It provides accessibility context. Screen readers use these tags to help users navigate the page structure quickly.

Should I always use mx-auto for centering?
It is the standard for centering a constrained-width container. For vertical or more complex centering, you'll eventually use Flexbox, which we will cover in a later lesson.

What if my layout doesn't look like the code?
Ensure your Tailwind CLI process is running (npm run dev) and that your dist/output.css is actually being generated and linked correctly in your <head>.

Recap

We’ve set up a clean project structure, initialized a semantic <section> for our hero, and used Tailwind’s utility-first approach to handle spacing and alignment. You now have a functional landing page structure ready for further refinement.

Up next: Polishing the Hero Section where we'll refine font properties and background styling to make the hero pop.

Work with me

Next.js Full-Stack Web App Development

A fast, SEO-ready full-stack web app built with Next.js 16 — from idea to deployed product, by an engineer who ships to production.

From $500

Next.js Website & Landing Page Development

A blazing-fast, SEO-optimized website or landing page in Next.js — the kind that loads instantly and ranks. Design-to-code, done right.

From $150

Back to Blog