Welcome to this guide on kicking off your new web project using two powerful tools: Next.js 14 and Tailwind CSS. If you're looking to build modern, fast, and highly customizable web applications, this combination is an excellent choice.

Why Next.js and Tailwind CSS?

Next.js is a React framework that offers a fantastic developer experience with features like:

• Server-Side Rendering (SSR) and Static Site Generation (SSG)
• File-system routing
• API routes
• Image optimization
• Internationalization (i18n)

Tailwind CSS is a utility-first CSS framework that allows you to build custom designs without writing much custom CSS. It provides low-level utility classes that you can compose to create any design directly in your markup.

Together, they provide a robust and efficient workflow for building beautiful and performant websites.

Setting Up Your Project

Let's dive into the setup process.

Step 1: Create a New Next.js App

Open your terminal and run the following command:

npx create-next-app@latest my-nextjs-tailwind-app --typescript --eslint

This command will scaffold a new Next.js project with TypeScript and ESLint configured. Navigate into your project directory:

cd my-nextjs-tailwind-app

Step 2: Install Tailwind CSS

Next, install Tailwind CSS and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files:

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

Step 3: Configure Tailwind Paths

Open your tailwind.config.js file and configure the content option to include all the paths to your template files:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: { extend: {} },
  plugins: []
};

Step 4: Add Tailwind Directives to Global CSS

Open your styles/globals.css file and add the Tailwind CSS directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply antialiased;
}

Ensure this globals.css file is imported in your pages/_app.tsx file.

Step 5: Start Your Development Server

Now you can start your Next.js development server:

npm run dev

Open http://localhost:3000 in your browser.

Example Usage

Here’s a quick example using Tailwind in a Next.js page:

// pages/index.tsx
export default function HomePage() {
  return (
    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-600 mb-4">
        Hello, Next.js with Tailwind!
      </h1>
      <p className="text-gray-700">This is a sample page styled with Tailwind CSS.</p>
      <button className="mt-6 px-6 py-3 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
        Click Me
      </button>
    </div>
  );
}

Conclusion

You have now successfully set up a Next.js 14 project with Tailwind CSS. This powerful combination allows for rapid development and highly customizable designs. Happy coding!