Tailwind with Next.js - Mini Project: Build & Apply

Build a Responsive Navigation Bar with Tailwind CSS in Next.js

📖 Scenario: You are creating a simple website using Next.js. You want to add a navigation bar at the top that looks good on both desktop and mobile screens. You will use Tailwind CSS to style the navigation bar and make it responsive.

🎯 Goal: Build a responsive navigation bar component in Next.js styled with Tailwind CSS. The navigation bar should have a site title on the left and three links on the right. On smaller screens, the links should stack vertically.

📋 What You'll Learn

Create a Next.js functional component called Navbar.

Use Tailwind CSS classes to style the navigation bar with a background color and padding.

Add a site title on the left side using a <h1> tag with bold text.

Add three navigation links on the right side using <a> tags.

Make the navigation links stack vertically on screens smaller than 640px wide.

Ensure the navigation bar uses semantic HTML and is accessible.

💡 Why This Matters

🌍 Real World

Navigation bars are essential for websites to help users move between pages easily. Responsive design ensures the site works well on phones, tablets, and desktops.

💼 Career

Front-end developers often build navigation components using React frameworks like Next.js and style them with Tailwind CSS to create fast, responsive user interfaces.

1

Create the Navbar component with site title and links

Create a Next.js functional component called Navbar. Inside it, return a <nav> element containing a <h1> with the text MySite and three <a> links with texts Home, About, and Contact. Do not add any styling yet.

Tailwind

export default function Navbar() {
  return (
    
      MySite
      Home
      About
      Contact
    
  )
}
// Your code here

Hint

Start by writing a function named Navbar that returns the HTML structure with <nav>, <h1>, and three <a> tags.

2

Add Tailwind CSS classes for layout and colors

Add Tailwind CSS classes to the <nav> element to give it a blue background (bg-blue-600) and padding (p-4). Add classes to the <h1> to make the text white (text-white) and bold (font-bold). Wrap the three <a> links inside a <div> and add classes to the links to make their text white (text-white) and spaced horizontally (ml-6 on each link except the first).

Tailwind

export default function Navbar() {
  return (
    
      MySite
      
        Home
        About
        Contact
      
    
  )
}
// Your code here

Hint

Use Tailwind classes on <nav>, <h1>, and <a> tags as described to style background, padding, text color, and spacing.

3

Use Flexbox to arrange title and links horizontally

Add Tailwind CSS flexbox classes to the <nav> element to arrange the <h1> and the <div> containing links horizontally with space between them. Use flex and justify-between on <nav>. Also add items-center to vertically center the items.

Tailwind

export default function Navbar() {
  return (
    
      MySite
      
        Home
        About
        Contact
      
    
  )
}
// Your code here

Hint

Add flex, justify-between, and items-center classes to the <nav> to arrange children horizontally with space and vertical alignment.

4

Make navigation links stack vertically on small screens

Modify the <div> containing the links to use Tailwind responsive classes. Add flex flex-col sm:flex-row to make links stack vertically on screens smaller than 640px and horizontally on larger screens. Also update the spacing classes so that on small screens the links have vertical margin mb-2 except the last, and on larger screens the links have horizontal margin ml-6 except the first.

Tailwind

export default function Navbar() {
  return (
    
      MySite
      
        Home
        About
        Contact
      
    
  )
}
// Your code here

Hint

Use flex flex-col sm:flex-row on the container and responsive margin classes on links to stack vertically on small screens and horizontally on larger screens.

Practice

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

easy

A. To write custom JavaScript functions

B. To manage server-side routing

C. To quickly style components using utility classes

D. To handle database connections

Solution

1. Step 1: Understand Tailwind CSS role

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

2. Step 2: Identify Next.js features

   Next.js handles routing and server-side rendering, not styling or database management.

3. Final Answer:

   To quickly style components using utility classes -> Option C

4. Quick Check:

   Tailwind CSS = Utility-first styling [OK]

Hint: Tailwind is for styling, not logic or routing [OK]

Common Mistakes:

• Confusing Tailwind with JavaScript logic
• Thinking Tailwind manages routing or backend
• Assuming Tailwind replaces Next.js features

2. Which of the following is the correct way to add Tailwind CSS classes to a Next.js component's div element?

easy

A. Content

B. Content

C. Content

D. Content

Solution

1. Step 1: Recall JSX syntax for class names

   In React and Next.js, use className with double quotes for CSS classes.

2. Step 2: Check each option

   <div className="bg-blue-500 text-white p-4">Content</div> uses correct JSX syntax with double quotes. <div class="bg-blue-500 text-white p-4">Content</div> uses plain HTML class, which is invalid in JSX. <div className={bg-blue-500 text-white p-4}>Content</div> treats the classes as a JavaScript expression without proper quotes. <div className=bg-blue-500 text-white p-4>Content</div> lacks quotes around the class names.

3. Final Answer:

   <div className="bg-blue-500 text-white p-4">Content</div> -> Option A

4. Quick Check:

   JSX uses className="..." [OK]

Hint: Use className with double quotes in JSX [OK]

Common Mistakes:

• Using plain class instead of className in JSX
• Missing quotes around class names
• Using invalid JSX syntax for className

3. Given this Next.js component using Tailwind CSS, what will be the background color of the button on a small screen?

export default function Button() {
  return (
    <button className="bg-green-500 sm:bg-red-500 text-white p-3">Click Me</button>
  )
}

medium

A. Green background

B. Red background

C. No background color

D. Blue background

Solution

1. Step 1: Understand Tailwind responsive prefixes

   The class bg-green-500 applies by default. The sm:bg-red-500 applies only on small screens and above (min-width 640px).

2. Step 2: Identify screen size effect

   On screens smaller than 640px, only bg-green-500 applies. On small screens and larger, bg-red-500 overrides the background.

3. Final Answer:

   Green background -> Option A

4. Quick Check:

   Default class applies below sm breakpoint [OK]

Hint: Responsive classes apply only at or above their breakpoint [OK]

Common Mistakes:

• Assuming sm: classes apply on all screen sizes
• Ignoring default class without prefix
• Confusing breakpoint directions

4. You have this Next.js component code:

export default function Header() {
  return (
    <header className="flex justify-center items-center p-4">
      <h1 className="text-2xl font-bold">Welcome</h1>
    </header>
  )
}

But the header content is not centered vertically. What is the likely cause?

medium

A. Using p-4 breaks flexbox layout

B. Missing min-h-screen or height on header to enable vertical centering

C. Tailwind CSS is not installed

D. Incorrect use of justify-center instead of items-center

Solution

1. Step 1: Understand flexbox vertical centering

   Flexbox vertical centering with items-center works if the container has height. Without height, vertical centering has no effect.

2. Step 2: Check header height

   The header has padding but no height or min-height. Adding min-h-screen or a fixed height allows vertical centering.

3. Final Answer:

   Missing min-h-screen or height on header to enable vertical centering -> Option B

4. Quick Check:

   Flex vertical center needs container height [OK]

Hint: Flex vertical center needs container height [OK]

Common Mistakes:

• Thinking justify-center controls vertical alignment
• Assuming padding sets height
• Ignoring need for Tailwind installation

5. You want to create a responsive navigation bar in Next.js using Tailwind CSS that stacks vertically on mobile and horizontally on desktop. Which combination of Tailwind classes achieves this?

hard

A. ...

B. ...

C. ...

D. ...

Solution

1. Step 1: Understand layout direction classes

   flex-col stacks items vertically; flex-row arranges items horizontally.

2. Step 2: Apply responsive prefixes

   Using flex flex-col md:flex-row means vertical stacking by default (mobile) and horizontal layout on medium screens and above (desktop).

3. Step 3: Check other options

   <nav className="grid grid-cols-4 md:grid-cols-1 gap-4 p-4">...</nav> uses grid-cols-4 by default, spreading items horizontally on mobile instead of stacking vertically. <nav className="block md:flex-row gap-4 p-4">...</nav> misses flex class, so md:flex-row won't apply properly. <nav className="flex-row flex md:flex-col gap-4 p-4">...</nav> reverses directions incorrectly.

4. Final Answer:

   <nav className="flex flex-col md:flex-row gap-4 p-4">...</nav> -> Option D

5. Quick Check:

   flex-col mobile + md:flex-row desktop = responsive nav [OK]

Hint: Use flex-col mobile, md:flex-row desktop for responsive nav [OK]

Common Mistakes:

• Forgetting to add base flex class
• Using wrong order of flex-row and flex-col
• Confusing grid with flex for simple nav layout