Step-by-Step Tutorial on Building a Responsive Website Using React and Tailwind CSS

by | Blog

Want to build a cool website that works on phones, tablets, and desktops? Good news! You can do it with React and Tailwind CSS. In this tutorial, we’ll walk through the steps together. You’ll learn how to set everything up and style your site with ease.

Whether you’re a beginner or just want a refresher, this guide will be fun and simple.

🚧 Step 1: Set Up Your Project

Before building anything, we need the right tools. Luckily, it only takes a few commands.

  1. Install Node.js from the official site if you don’t have it yet.
  2. Open your terminal and run:
npx create-react-app my-website

This creates a new React project in a folder called my-website.

  1. Go inside the project folder:
cd my-website

🎨 Step 2: Add Tailwind CSS

Time to style things up with Tailwind CSS.

  1. Install Tailwind and its dependencies:
npm install -D tailwindcss postcss autoprefixer

Then run:

npx tailwindcss init -p

Now you’ll see tailwind.config.js and postcss.config.js files added.

  1. In your tailwind.config.js, replace the content section with this:
content: ["./src//*.{js,jsx,ts,tsx}"],
  1. Next, open src/index.css and add these lines at the top:
@tailwind base;
@tailwind components;
@tailwind utilities;

Awesome! Tailwind is ready to go.

📦 Step 3: Clean Up the React App

Let’s clean up the React project so it’s simple.

  1. Delete everything inside src/App.css.
  2. Update App.js to something like this:

function App() {
  return (
    <div className="text-center p-10">
      <h1 className="text-4xl font-bold text-blue-600">
        Welcome to My Website!
      </h1>
      <p className="mt-4 text-gray-700">
        Built with ❤️ using React and Tailwind CSS
      </p>
    </div>
  );
}

export default App;

Try npm start to see your website in the browser!

📱 Step 4: Make It Responsive

This is where Tailwind shines. Let’s make your site look perfect on any device.

  1. Add a section with two columns that stack on mobile. 

function App() {
  return (
    <div className="p-6">
      <h1 className="text-3xl font-bold text-center text-indigo-500">
        Responsive Demo
      </h1>

      <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 gap-6">
        <div className="bg-green-200 p-4 rounded-lg">
          <h2 className="text-xl font-semibold">Column 1</h2>
          <p>This column stacks on small screens.</p>
        </div>

        <div className="bg-yellow-200 p-4 rounded-lg">
          <h2 className="text-xl font-semibold">Column 2</h2>
          <p>And this one too!</p>
        </div>
      </div>
    </div>
  );
}

Try resizing your browser window to see it in action.

✨ Step 5: Add a Navigation Bar

A website needs a navbar, right? Let’s add one.


function Navbar() {
  return (
    <nav className="bg-white border-b border-gray-200 p-4 flex justify-between items-center">
      <div className="text-xl font-bold text-indigo-600">MySite</div>
      <ul className="flex space-x-4 text-gray-600">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  );
}

Now use it in App.js:


import Navbar from "./Navbar";

function App() {
  return (
    <>
      <Navbar />
      <main className="p-6">
        <h1 className="text-3xl font-bold text-center">
          Welcome!
        </h1>
      </main>
    </>
  );
}

🖼️ Step 6: Add a Hero Section with an Image

Let’s wow visitors with a hero section at the top.


function Hero() {
  return (
    <section className="bg-gray-100 p-10 text-center">
      <h1 className="text-4xl font-bold mb-4">
        Meet Your New Favorite Website
      </h1>
      <p className="text-gray-700 mb-6">
        Look great on any screen, fast and modern.
      </p>
      <button className="bg-indigo-600 text-white py-2 px-6 rounded-full">
        Get Started
      </button>
    </section>
  );
}

Don’t forget to import and use it in App.js too!

🔀 Step 7: Use Tailwind Components

You don’t need to write every bit from scratch. Use pre-designed components like cards, buttons, or footers. Tailwind has many websites like:

Just copy and paste what you need, and tweak the colors and layout.

📁 Step 8: Organize Your Files

As your app grows, keep things tidy.

  • Put components in a components folder.
  • Use folders for pages if building a multi-page app with React Router.
  • Name your files clearly like Navbar.js, Hero.js, etc.

🧪 Step 9: Test Responsiveness

Always check your site on different screen sizes:

  • Use Chrome DevTools and toggle mobile view.
  • Try Tablet or iPhone sizes.
  • Make sure buttons and layouts adapt well.

🚀 Step 10: Deploy Your Site

You’ve built something awesome. Let’s share it with the world!

  1. Create a GitHub repo and push your code.
  2. Use Vercel or <a href

Pin It on Pinterest