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

Need a 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

Need a 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

Need a 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

Need a 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.