In this tutorial, we’ll guide you through creating a simple Next.js 14 app using the App Router and Tailwind CSS for styling. We’ll assume that Tailwind CSS has already been installed during the Next.js setup process. Let’s get started!
Prerequisites
Ensure you have the following:
- Node.js: Download and install Node.js.
- npm or Yarn: A package manager to install dependencies (npm is bundled with Node.js).
- Text Editor: Choose a text editor such as VSCode, Sublime Text, or Atom.
1. Creating a New Next.js Project
First, create a new Next.js project with Tailwind CSS:
npx create-next-app@latest nextjs-tailwind-app --experimental-app
Navigate to the project directory:
cd nextjs-tailwind-app
2. Understanding the Project Structure
With the App Router, the project structure differs from the traditional pages router:
nextjs-tailwind-app/
├── app/
│ ├── layout.js
│ └── page.js
├── public/
├── styles/
│ └── globals.css
├── tailwind.config.js
├── postcss.config.js
├── .gitignore
├── package.json
└── README.md
- app/: Contains the main routing files.
- public/: For static assets.
- styles/: Contains global styles.
- tailwind.config.js: Tailwind CSS configuration.
- postcss.config.js: PostCSS configuration for processing Tailwind.
3. Setting Up Tailwind CSS
Ensure Tailwind CSS is configured correctly by editing tailwind.config.js:
// tailwind.config.js
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
};
Next, include Tailwind’s base, components, and utilities in your global CSS file, styles/globals.css:
/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
4. Setting Up a Layout Component
The layout component defines the structure of your application. Update the app/layout.js file as follows:
// app/layout.js
import './globals.css';
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<title>Next.js 14 with Tailwind CSS</title>
</head>
<body className="bg-gray-100">
<header className="bg-blue-600 text-white py-4 text-center">
<h1>My Next.js 14 App with Tailwind CSS</h1>
</header>
<main className="container mx-auto py-8">{children}</main>
<footer className="bg-gray-800 text-white py-4 text-center">
<p>© 2024 My Next.js App</p>
</footer>
</body>
</html>
);
}
5. Creating Your First Page
Let’s create a simple home page in app/page.js:
// app/page.js
export default function HomePage() {
return (
<div className="text-center">
<h2 className="text-2xl font-bold mb-4">Welcome to Next.js 14 with the App Router and Tailwind CSS!</h2>
<p className="text-gray-700 mb-4">
This is a simple example of using the App Router and Tailwind CSS in a Next.js application.
</p>
<p className="text-gray-700">
Edit <code className="bg-gray-200 p-1 rounded">app/page.js</code> to modify this page.
</p>
</div>
);
}
6. Running the Development Server
To view your application, start the development server:
npm run dev
Open http://localhost:3000 in your browser to see your app in action.
7. Customizing with Tailwind CSS
Tailwind CSS offers a utility-first approach to styling. For example, to add padding, text colors, and responsive design, you can use utility classes directly in your components. Here’s how you can modify the styling of the HomePage component:
// app/page.js
export default function HomePage() {
return (
<div className="text-center p-4">
<h2 className="text-3xl font-bold mb-6 text-blue-500">Welcome to Next.js 14 with Tailwind CSS!</h2>
<p className="text-lg text-gray-600 mb-4">
This tutorial showcases the integration of Tailwind CSS with the App Router in Next.js.
</p>
<p className="text-gray-600">
Modify the <code className="bg-gray-100 p-1 rounded">app/page.js</code> file to see changes.
</p>
</div>
);
}
8. Deploying Your Next.js App
Deploying your app is straightforward with Vercel. Refer to the deployment documentation to launch your app on the web.
We Are Here to Help
At Kodecraft, we specialize in web development and have deep expertise in Next.js and Tailwind CSS. Whether you’re starting a new project or enhancing an existing one, our experienced team is ready to assist you. Contact us today to discuss how we can help bring your next project to life!
