Tailwind CSS integration in NextJS - Mini Project: Build & Apply

Tailwind CSS Integration in Next.js

📖 Scenario: You are building a simple Next.js app and want to style it using Tailwind CSS. Tailwind CSS helps you quickly add beautiful styles using utility classes.

🎯 Goal: Integrate Tailwind CSS into a Next.js project and create a styled homepage with a heading and a button using Tailwind classes.

📋 What You'll Learn

Create a new Next.js app structure

Add Tailwind CSS configuration files

Import Tailwind CSS styles in the app

Use Tailwind CSS classes in a React component

💡 Why This Matters

🌍 Real World

Tailwind CSS is widely used in web projects to quickly style components with consistent design and responsive layouts.

💼 Career

Knowing how to integrate Tailwind CSS in Next.js is valuable for frontend developer roles focused on modern React frameworks and utility-first CSS.

1

Create Next.js app structure

Create a new file called app/page.jsx with a React functional component named Page that returns a <main> element containing an <h1> with the text Welcome to Next.js.

NextJS

export default function Page() {
  return (
    
      {/* Your code here */}
    
  )
}

Need a hint?

Define a React functional component named Page that returns JSX with a main and h1 element.

2

Add Tailwind CSS config files

Create a file named tailwind.config.js with the default export of an object containing content set to an array with "./app/**/*.{js,jsx,ts,tsx}" and theme with an empty extend object.

NextJS

export default function Page() {
  return (
    
      Welcome to Next.js
    
  )
}

// Create tailwind.config.js with content and theme
// Your code here

Need a hint?

Create tailwind.config.js exporting the config object with content and theme.extend.

3

Import Tailwind CSS styles

Create a file app/globals.css and add the three Tailwind directives: @tailwind base;, @tailwind components;, and @tailwind utilities;. Then, import ./globals.css in app/layout.jsx.

NextJS

export default function Page() {
  return (
    
      Welcome to Next.js
    
  )
}

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

// Create app/globals.css with Tailwind directives
// Import globals.css in app/layout.jsx
// Your code here

Need a hint?

Add Tailwind directives in globals.css and import it in layout.jsx to apply styles globally.

4

Use Tailwind CSS classes in component

In app/page.jsx, add Tailwind CSS classes to the <main> and <h1>. Use className="flex min-h-screen flex-col items-center justify-center bg-gray-100" on <main> and className="text-4xl font-bold text-blue-600" on <h1>. Also add a <button> below the heading with className="mt-6 rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600" and text Click me.

NextJS

export default function Page() {
  return (
    
      Welcome to Next.js
      {/* Add a button with Tailwind classes here */}
    
  )
}

// Your code here

Need a hint?

Add the specified Tailwind CSS classes to style the main container, heading, and add a styled button below.