Step-by-Step: Styling a Portfolio Website With Tailwind CSS

Step-by-Step: Styling a Portfolio Website With Tailwind CSS

Tailwind CSS has revolutionized how developers style modern websites, offering utility-first classes that speed up development without sacrificing design flexibility. In this guide, you'll learn how to take a basic portfolio website and turn it into a visually polished, responsive site using Tailwind — no custom CSS required.

Step 1: Set Up Your Tailwind Environment

If you're using a framework like Next.js, installing Tailwind is quick:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then, configure your tailwind.config.js to include all your file paths:

content: [
  "./pages/**/*.{js,ts,jsx,tsx}",
  "./components/**/*.{js,ts,jsx,tsx}",
],

Finally, import Tailwind's directives into your globals.css:

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

Step 2: Create a Layout With Tailwind's Utility Classes

Let’s add a centered hero section to your homepage:

<section class="min-h-screen flex items-center justify-center bg-gray-100">
  <div class="text-center">
    <h1 class="text-4xl font-bold mb-4">Hi, I'm Jane Doe</h1>
    <p class="text-lg text-gray-600">Frontend Developer & Designer</p>
  </div>
</section>

This simple layout uses Tailwind’s spacing, flex, and typography utilities to build a clean hero area without writing a single custom style rule.

Step 3: Add a Project Grid With Responsive Design

Tailwind makes building responsive grids a breeze:

<section class="py-12 px-4 bg-white">
  <h2 class="text-2xl font-semibold text-center mb-8">Projects</h2>
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
    <div class="border rounded-lg p-4 shadow-sm hover:shadow-md transition">
      <h3 class="text-lg font-medium">Weather App</h3>
      <p class="text-gray-500">Built with React and OpenWeather API</p>
    </div>
    <!-- Add more projects here -->
  </div>
</section>

This creates a grid layout that adjusts based on screen size. Each card has subtle hover effects for better UX.

Step 4: Style the Contact Section

Let’s add a simple, clean contact form:

<section class="bg-gray-100 py-12 px-4">
  <div class="max-w-xl mx-auto">
    <h2 class="text-2xl font-semibold text-center mb-6">Contact Me</h2>
    <form class="space-y-4">
      <input type="text" placeholder="Your Name" class="w-full p-3 border border-gray-300 rounded"/>
      <input type="email" placeholder="Your Email" class="w-full p-3 border border-gray-300 rounded"/>
      <textarea placeholder="Your Message" class="w-full p-3 border border-gray-300 rounded h-32"></textarea>
      <button type="submit" class="bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700 transition">
        Send Message
      </button>
    </form>
  </div>
</section>

The form uses Tailwind's spacing and color utilities for clean, consistent design and mobile responsiveness.

Conclusion

With Tailwind CSS, you can style a professional-looking portfolio site without ever writing traditional CSS. Its utility-first approach allows rapid prototyping, clean structure, and responsive design with minimal effort. If you're serious about standing out to potential employers or clients, mastering Tailwind is a smart move for any modern web developer.

Found this helpful? Support more content like this via Buy Me a Coffee ☕