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 */}
    
  )
}

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

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

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

Hint

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

Practice

1. What is the main purpose of integrating Tailwind CSS in a Next.js project?

easy

A. To handle server-side rendering manually

B. To add backend API routes

C. To manage database connections

D. To quickly style components using utility classes

Solution

1. Step 1: Understand Tailwind CSS role

   Tailwind CSS provides utility classes for styling UI elements quickly without writing custom CSS.

2. Step 2: Relate to Next.js integration

   In Next.js, Tailwind is used to style components easily, not for backend or rendering logic.

3. Final Answer:

   To quickly style components using utility classes -> Option D

4. Quick Check:

   Tailwind CSS = Utility-first styling [OK]

Hint: Tailwind is for styling, not backend or rendering [OK]

Common Mistakes:

• Confusing Tailwind with backend or API features
• Thinking Tailwind manages server rendering
• Assuming Tailwind handles database

2. Which file must you import Tailwind's base styles into for a Next.js project?

easy

A. next.config.js

B. tailwind.config.js

C. pages/_app.js or app/layout.js

D. package.json

Solution

1. Step 1: Identify where global styles go in Next.js

   Global CSS imports happen in pages/_app.js for pages router or app/layout.js for app router.

2. Step 2: Understand Tailwind import location

   Tailwind's base styles are imported in these files to apply styles app-wide.

3. Final Answer:

   pages/_app.js or app/layout.js -> Option C

4. Quick Check:

   Global CSS import = _app.js or layout.js [OK]

Hint: Import Tailwind CSS in your main app wrapper file [OK]

Common Mistakes:

• Trying to import styles in tailwind.config.js
• Importing in next.config.js which is config only
• Adding styles in package.json which is metadata

3. Given this Next.js component using Tailwind CSS, what color will the button text be?

export default function Button() {
  return <button className="text-red-500 hover:text-blue-500">Click me</button>;
}

medium

A. Red text that turns blue on hover

B. Blue text that turns red on hover

C. Always blue text

D. Always red text with no hover effect

Solution

1. Step 1: Analyze the Tailwind classes

   The button has text-red-500 which sets text color red initially, and hover:text-blue-500 which changes text color to blue on hover.

2. Step 2: Understand hover behavior

   When the mouse is over the button, the text color changes to blue; otherwise, it stays red.

3. Final Answer:

   Red text that turns blue on hover -> Option A

4. Quick Check:

   text-red-500 + hover:text-blue-500 = red then blue on hover [OK]

Hint: Hover classes override base styles on mouse over [OK]

Common Mistakes:

• Ignoring hover prefix and thinking text is always blue
• Confusing initial and hover colors
• Assuming no color change on hover

4. You added Tailwind CSS to your Next.js app but styles are not applying. What is a likely cause?

medium

A. You forgot to import 'tailwind.css' in your main app file

B. You didn't install React correctly

C. You used invalid JSX syntax in components

D. You didn't restart the Next.js server after installing Tailwind

Solution

1. Step 1: Check Tailwind CSS import

   If Tailwind styles are missing, often the CSS file with Tailwind directives is not imported in _app.js or layout.js.

2. Step 2: Consider other causes

   While restarting server helps, missing import is the primary cause. React install or JSX errors cause different issues.

3. Final Answer:

   You forgot to import 'tailwind.css' in your main app file -> Option A

4. Quick Check:

   Missing Tailwind import = no styles [OK]

Hint: Always import Tailwind CSS file in your main app file [OK]

Common Mistakes:

• Assuming React install affects Tailwind styles
• Ignoring missing CSS import
• Not restarting server but that alone won't fix missing styles

5. You want to create a responsive Next.js component using Tailwind CSS that shows a green background on small screens and blue on medium and larger screens. Which class combination achieves this?

hard

A. "bg-blue-500 md:bg-green-500"

B. "bg-green-500 md:bg-blue-500"

C. "md:bg-green-500 bg-blue-500"

D. "bg-green-500 bg-blue-500 md:bg-green-500"

Solution

1. Step 1: Understand Tailwind responsive prefixes

   Classes without prefix apply to all screen sizes. Prefix md: applies styles at medium screens and above.

2. Step 2: Apply background colors correctly

   To have green on small screens, use bg-green-500. To override with blue on medium+, use md:bg-blue-500.

3. Final Answer:

   "bg-green-500 md:bg-blue-500" -> Option B

4. Quick Check:

   Small = green, Medium+ = blue with md: prefix [OK]

Hint: Use base class for small, md: prefix for medium+ [OK]

Common Mistakes:

• Reversing colors with md prefix
• Using multiple base classes causing conflicts
• Not understanding responsive prefixes