Back to Blog
Getting Started with NextJS and Tailwind
July 15, 2025

Getting Started with NextJS and Tailwind

Getting Started with NextJS and Tailwind

Next.js is a React framework that gives you building blocks to create web applications. By framework, we mean Next.js handles the tooling and configuration needed for React, and provides additional structure, features, and optimizations for your application.

Why Next.js?

Next.js provides a solution to many common challenges in React applications:

  • Server-side rendering: Next.js allows you to render your React components on the server before sending them to the client.
  • Static site generation: Next.js can generate static HTML at build time.
  • API routes: Next.js provides a way to create API endpoints as part of your Next.js app.

Getting Started

First, let's create a new Next.js application:

npx create-next-app@latest my-next-app
cd my-next-app

During the setup, you'll be prompted to include Tailwind CSS. Select yes to automatically configure Tailwind CSS in your project.

Running Your Next.js App

Once the installation is complete, you can run the development server:

npm run dev

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

Creating Your First Page

Next.js uses a file-system based router. To create a new page, simply add a new file to the app directory:

// app/about/page.jsx
export default function About() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold">About Us</h1>
      <p className="mt-4 text-xl">This is the about page of our Next.js application.</p>
    </div>
  );
}

Using Tailwind CSS

Tailwind CSS is a utility-first CSS framework. Here's an example of using Tailwind to style a button:

<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

This creates a blue button that darkens on hover, with white text, bold font, and rounded corners.

Conclusion

You've now created a basic Next.js application with Tailwind CSS. From here, you can start building more complex components and pages for your website.