Build a Modern Landing Page with Tailwind CSS

Introduction

Tailwind CSS is a utility-first CSS framework that allows you to build custom designs without leaving your HTML. In this guide, we will set up a project and build a responsive hero section.

Step 1: Initialize Your Project

Start by creating a project folder and initializing it with npm.

mkdir tailwind-landing-page
cd tailwind-landing-page
npm init -y

Step 2: Install Tailwind CSS

Install Tailwind and its peer dependencies via npm, then generate your configuration files.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Step 3: Configure Template Paths

Open your tailwind.config.js file and add the paths to all of your template files.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 4: Add Tailwind Directives

Create a src/input.css file and add the @tailwind directives for each of Tailwind’s layers.

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Build the Hero Section

In your src/index.html, use Tailwind classes to create a responsive layout.

<section class="bg-gray-900 text-white py-20 px-10">
  <div class="max-w-4xl mx-auto text-center">
    <h1 class="text-5xl font-bold mb-6">Build Faster with Utilities</h1>
    <p class="text-xl text-gray-400 mb-8">
      The most productive way to build modern websites without writing custom CSS.
    </p>
    <button class="bg-blue-600 hover:bg-blue-700 px-8 py-3 rounded-lg font-medium">
      Get Started
    </button>
  </div>
</section>

Step 6: Start the Build Process

Run the CLI tool to scan your template files for classes and build your CSS.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch