Building a Basic Website with Next.js and Tailwind CSS

Play this article

Introduction

In the ever-evolving landscape of web development, frameworks like Next.js and utility-first CSS frameworks like Tailwind CSS have gained significant popularity for their ease of use and powerful features. In this tutorial, we'll guide you through the process of creating a basic website using Next.js and styling it with Tailwind CSS. Let's dive in!

Prerequisites

Before we get started, make sure you have Node.js and npm (Node Package Manager) installed on your machine. You can download them from the official website: Node.js.

Step 1: Setting Up the Next.js Project

First, let's create a new Next.js project. Open your terminal and run the following commands:

npx create-next-app my-nextjs-tailwind-app
cd my-nextjs-tailwind-app

This will create a new Next.js project with the default setup.

Step 2: Installing Tailwind CSS

Next, let's install Tailwind CSS and its dependencies. Run the following commands in your project directory:

npm install tailwindcss postcss autoprefixer

After installing, create the configuration files for Tailwind CSS:

npx tailwindcss init -p

This will create a tailwind.config.js file in your project directory.

Step 3: Configuring Tailwind CSS with Next.js

Modify the postcss.config.js file in your project to include the Tailwind CSS and autoprefixer plugins:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Now, open the styles/globals.css file and import the Tailwind CSS styles:

/* styles/globals.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Step 4: Creating Your First Page

Let's create a simple page using Next.js. Create a new file under the pages directory, for example, pages/index.js:

// pages/index.js
import React from 'react';

const Home = () => {
  return (
    <div className="bg-blue-500 text-white p-5">
      <h1 className="text-3xl font-bold">Welcome to My Next.js App</h1>
      <p className="mt-3">Start building your awesome website!</p>
    </div>
  );
};

export default Home;

Step 5: Running Your Next.js App

Now, you're ready to see your basic Next.js app in action. Run the following command in your terminal:

npm run dev

Visit http://localhost:3000 in your browser, and you should see your home page with the Tailwind CSS styles applied.

Conclusion

Congratulations! You've successfully set up a basic website using Next.js and styled it with Tailwind CSS. This combination provides a powerful and efficient way to build modern, responsive web applications. Feel free to explore more features of Next.js and Tailwind CSS to enhance your web development skills. Happy coding!

Did you find this article valuable?

Support Bharat Saraswat by becoming a sponsor. Any amount is appreciated!