Tailwind with Next.js - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add Tailwind CSS to a Next.js project by importing the CSS file.

Tailwind

import '[1]';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Drag options to blanks, or click blank then click option'

Amain.css

Btailwind.css

C../styles/globals.css

Dindex.css

Attempts:

3 left

💡 Hint

Common Mistakes

Using a CSS file name that does not exist in the project.

Forgetting to import the CSS file in the _app.js or _app.tsx file.

In Next.js, Tailwind CSS is usually imported in the globals.css file inside the styles folder.

2fill in blank

medium

Complete the code to create a responsive container using Tailwind CSS in a Next.js component.

Tailwind

<div className="[1]">
  <h1 className="text-2xl font-bold">Welcome to Next.js with Tailwind!</h1>
</div>

Drag options to blanks, or click blank then click option'

Acontainer mx-auto px-4

Bmax-w-full p-2

Cflex justify-center items-center

Dbg-gray-100 rounded-lg

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex classes instead of container for layout.

Missing horizontal margin auto to center the container.

The container mx-auto px-4 classes create a centered responsive container with horizontal padding.

3fill in blank

hard

Fix the error in the Tailwind class usage to make the button have a blue background and light blue text.

Tailwind

<button className="bg-[1]-500 text-[2]-100 px-4 py-2 rounded">
  Click me
</button>

Drag options to blanks, or click blank then click option'

Ablue

Bred

Cgreen

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color that does not match the background and text contrast.

Using colors that are not part of Tailwind's default palette.

The correct Tailwind color for a blue background is bg-blue-500 and for white-ish text is text-blue-100.

4fill in blank

hard

Fill both blanks to create a flex container that centers items vertically and horizontally.

Tailwind

<div className="flex [1] [2] h-screen">
  <p className="text-lg">Centered content</p>
</div>

Drag options to blanks, or click blank then click option'

Ajustify-center

Bitems-start

Citems-center

Djustify-end

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up justify and items classes.

Using start or end instead of center for alignment.

Using justify-center centers items horizontally and items-center centers items vertically in a flex container.

5fill in blank

hard

Fill all three blanks to create a Next.js page with a responsive header using Tailwind CSS.

Tailwind

export default function Home() {
  return (
    <header className="bg-[1]-600 p-[2]">
      <h1 className="text-[3]-100 text-3xl font-semibold">My Next.js Site</h1>
    </header>
  );
}

Drag options to blanks, or click blank then click option'

Agreen

B6

Cgray

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using colors that do not contrast well.

Using padding values that are too small or too large.

The header has a blue background with padding 6 and gray text for good contrast.