Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 43

Rebuilding Your Profile with Tailwind CSS

Recommended resources

Welcome to the capstone project for our Tailwind CSS module! Over the last few lessons, you've learned how to set up Tailwind, leverage its utility-first approach, build responsive layouts, customize themes, and optimize your CSS for production. Now, it's time to bring all those skills together.

In this lesson, you will complete the mini-project for this module: rebuilding your 3-page personal profile site from scratch using only Tailwind CSS for styling. This is a fantastic opportunity to solidify everything you've learned. By rebuilding a site you're already familiar with, you can focus entirely on the styling workflow and directly compare the Tailwind approach to the traditional CSS you used before.

Your goal is to apply your new skills to create a modern, responsive, and consistently styled website, all while practicing a professional development workflow.

Project Inspiration

Before we dive in, let's look at what's possible. Here are a couple of examples of modern, responsive portfolio sites built with Tailwind CSS. Use these for inspiration as you think about the layout and feel of your own site.

Responsive Personal Portfolio Website with Tailwind CSS
This image shows a clean, responsive portfolio design, demonstrating how components like skills and profile sections adapt from desktop to mobile. Notice the use of progress bars and cards, which are common patterns you can build with Tailwind.
Modern Portfolio Website Design with Tailwind CSS
This example showcases a more design-intensive portfolio. Pay attention to the layout, typography, and how the navigation changes to a hamburger menu on the mobile view—a key feature we'll be implementing.

1. Project Setup: A Fresh Start

We'll begin by creating a new project folder and setting up Tailwind CSS, just as a professional developer would when starting a new job or project.

  1. Create Your Project: Create a new folder named profile-tailwind.
  2. Initialize the Project: Open this folder in VS Code and run npm init -y in the terminal to create a package.json file.
  3. Install Tailwind: Follow the installation steps we've covered previously. The video below provides a clear, step-by-step guide.

Portfolio Website with Tailwind CSS | Tailwind Tutorial for Beginners

To ensure your setup is correct, watch this section of the 'Portfolio Website with Tailwind CSS' tutorial. It covers installing Tailwind and initializing your configuration files.

Watch from 12:13 to 15:10. Follow the steps to install tailwindcss, create tailwind.config.js, set up your input.css and output.css files, and link the output file in your HTML.

  1. Configure Your Theme: Open your tailwind.config.js file. Copy the theme object from the project you worked on in the last few lessons. This will bring over your custom color palette and fonts, ensuring your new site has a consistent design system from the start.

  2. Create Your HTML Files:

    • Create three empty files in your root directory: index.html, about.html, and contact.html.
    • Copy the basic HTML structure (the content inside the <body> tag) from your original profile site project (the one from Module 2/3). Do not copy over any old <style> tags or links to your old CSS stylesheet.
    • In each HTML file, make sure to link to your new Tailwind CSS output file (e.g., <link href="./dist/output.css" rel="stylesheet">). The exact path may vary based on your setup.

  3. Start the Development Server: Run your dev or watch script (e.g., npm run dev) to have Tailwind watch for changes and compile your CSS.

You should now have a completely unstyled, multi-page site. This is your blank canvas.

2. Building the Shared Components: Navbar and Footer

Good web development practice involves building reusable components first. Let's start with the navigation bar and footer that will appear on every page.

Responsive Navigation Bar

Your goal is to build a navbar that:

  • Displays the logo and a list of links on desktop.
  • Hides the links and shows a hamburger menu icon on mobile.
  • When the hamburger icon is clicked, a mobile menu appears.

This involves using Flexbox for alignment, responsive prefixes (md:flex, hidden) to control visibility, and a small amount of JavaScript to handle the click event.

Portfolio Website with Tailwind CSS | Tailwind Tutorial for Beginners

The following clip from the 'Portfolio Website' tutorial is a masterclass in building a responsive, interactive navbar with Tailwind CSS and a few lines of JavaScript. This is directly applicable to your project.

Watch from 23:28 to 39:34. Pay close attention to: Using fixed and container for the main layout. Using Flexbox (flex, justify-between, items-center) to align the logo, links, and icon. Toggling visibility with responsive prefixes like hidden and md:flex. The JavaScript logic for toggling the hidden class on the mobile menu and changing the hamburger icon.

Your Task:

  • Implement the navbar in one of your HTML files (e.g., index.html).
  • Use your custom theme colors for the background and text (bg-primary, text-neutral, etc.).
  • Once you are happy with it, copy the entire <nav> section into your other HTML files to ensure consistency.

3. Styling the Pages

With the shared components in place, you can now style the unique content of each page.

Home Page: The Hero Section

Your home page likely has an introduction or "hero" section. A common pattern is a two-column layout with text on one side and an image on the other, which stacks into a single column on mobile devices.

Portfolio Website with Tailwind CSS | Tailwind Tutorial for Beginners

This part of the tutorial demonstrates how to build a complex hero section with responsive text, absolutely positioned elements, and a layout that changes significantly across breakpoints.

Watch from 39:34 to 55:00 for inspiration. You don't need to replicate it exactly, but focus on the techniques used: Using relative on a parent container to allow for absolute positioning of child elements (like your image). Changing layouts with responsive prefixes (e.g., lg:left-0, mx-auto). Styling text and buttons using your theme's colors and font sizes.

About Page: Skills and Bio

The About page is a great place to showcase your skills. A card-based layout or a list with progress bars are excellent ways to do this visually.

Portfolio Website with Tailwind CSS | Tailwind Tutorial for Beginners

The next section of the video builds an 'About Me' section that includes a responsive two-column layout and progress bars for skills—a perfect feature for your portfolio.

Watch from 55:00 to 01:02:42. Focus on: How flex-col is used for the mobile layout and lg:flex-row for desktop. The simple but effective technique for creating a progress bar: a background parent <div> and a foreground child <div> with a specific width (e.g., w-11/12).

Contact Page: The Form

Styling forms can be tricky, but Tailwind's utility classes give you full control over every input, label, and button.

Portfolio Website with Tailwind CSS | Tailwind Tutorial for Beginners

Finally, let's style the contact form. This clip shows how to style inputs, text areas, and a submit button to match your site's theme.

Watch from 01:14:20 to 01:19:07. Note the use of classes for: Padding (p- or px-/py-) inside the inputs. Borders and focus states (e.g., ring-1, focus:ring-indigo-500). Responsive width (w-full, md:w-1/2). Styling the button with background colors, padding, and hover effects.

4. Challenge: Add a Dark Mode Toggle

As a final challenge to really elevate your project, try implementing a light/dark mode toggle. This is a very popular feature in modern web design and is surprisingly straightforward with Tailwind.

Portfolio Website with Tailwind CSS | Tailwind Tutorial for Beginners

The 'Portfolio Website' tutorial concludes with a fantastic walkthrough of implementing dark mode. This is an excellent stretch goal for your project.

Watch from 01:24:39 to 01:31:12. You will learn how to: Enable dark mode in tailwind.config.js (darkMode: 'class'). Use the dark: prefix to apply styles conditionally (e.g., bg-white dark:bg-slate-900). Use JavaScript to toggle a dark class on the <body> element when a button is clicked.

Conclusion

Congratulations on completing this mini-project! By rebuilding your site with Tailwind CSS, you have moved beyond theory and engaged in the practical, hands-on work of a front-end developer. You have solidified your understanding of utility-first CSS, responsive design, and modern development workflows.

Key Takeaways:

  • You've applied the entire Tailwind workflow: setup, theming, styling with utilities, implementing responsive and interactive states, and (optionally) adding features like dark mode.
  • You now have a tangible project that showcases your ability to use one of the most popular CSS frameworks in the industry.
  • You've practiced breaking down a user interface into components and styling them systematically.

This project marks the end of our deep dive into modern CSS. You are now well-equipped to style almost any static website you can imagine.

In the next module, we will take a significant step forward. We'll leave the world of static HTML behind and enter the world of dynamic web applications with Vue.js. You'll learn how to build interactive user interfaces that can manage data and state, starting with the foundational concepts of Vue components and reactivity.