# Building a Basic Website with Next.js and Tailwind CSS

## 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](https://nodejs.org/).

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:

```bash
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:

```bash
npm install tailwindcss postcss autoprefixer
```

After installing, create the configuration files for Tailwind CSS:

```bash
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:

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

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

```css
/* 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`:

```jsx
// 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:

```bash
npm run dev
```

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

### Conclusion

**<mark>Congratulations</mark>**! 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!