Building a Full-Stack React App with Next.js and Tailwind CSS: A Step-by-Step Guide

Majd Muhtaseb10/18/202515 minutes

Introduction

This guide will walk you through building a basic full-stack application using Next.js, React, and Tailwind CSS. We'll cover setting up the project, creating components, fetching data, and styling the application. This example focuses on a simple task management app.

Prerequisites

Node.js and npm installed
Basic understanding of React and JavaScript

Setting Up the Project

Create a Next.js app:

npx create-next-app my-fullstack-app
cd my-fullstack-app

Install Tailwind CSS:

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

Configure Tailwind CSS:

Add Tailwind directives to your globals.css file (located in the styles directory):
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Configure tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Creating a Simple Component

Create a components directory and add a TaskItem.js file:

// components/TaskItem.js
import React from 'react';

const TaskItem = ({ task }) => {
  return (
    <div className="bg-white p-4 rounded shadow-md">
      <p className="text-gray-800">{task.title}</p>
    </div>
  );
};

export default TaskItem;

Fetching Data

We'll simulate fetching data from an API endpoint. In a real-world application, you'd use an API like a Laravel-based one. For simplicity, we'll use static data.

// pages/index.js
import TaskItem from '../components/TaskItem';

const tasks = [
  { id: 1, title: 'Learn Next.js' },
  { id: 2, title: 'Implement Tailwind CSS' },
  { id: 3, title: 'Build a full-stack app' },
];

export default function Home() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Task List</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {tasks.map((task) => (
          <TaskItem key={task.id} task={task} />
        ))}
      </div>
    </div>
  );
}

Running the Application

Run the development server:

npm run dev

Visit http://localhost:3000 in your browser to see the application.

Conclusion

This guide provides a basic example of building a full-stack React application using Next.js and Tailwind CSS. You can expand upon this foundation to create more complex applications by adding backend functionality, authentication, and database integration. Remember to explore the official documentation for Next.js and Tailwind CSS to learn more about their features and capabilities.