Tailwind CSS integration in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import Tailwind CSS styles in a Next.js app.

NextJS

import '[1]/globals.css';

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

Astyles

Btailwind

Cpublic

Dcss

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'tailwind' or 'css' as folder names which do not exist by default.

Trying to import from 'public' which is for static assets.

In Next.js, global styles including Tailwind CSS are usually imported from the styles folder.

2fill in blank

medium

Complete the code to add Tailwind directives in the CSS file.

NextJS

@tailwind base;
@tailwind components;
@tailwind [1];

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

Astyles

Butilities

Cimports

Dmodules

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'styles' or 'imports' which are not valid Tailwind directives.

Missing the semicolon at the end.

The @tailwind utilities; directive adds Tailwind's utility classes to your CSS.

3fill in blank

hard

Fix the error in the Tailwind config export statement.

NextJS

export default [1] content: ['./app/**/*.{js,ts,jsx,tsx}'], theme: { extend: {} } }

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

Amodule

Bconfig

Cconst

D{

Attempts:

3 left

💡 Hint

Common Mistakes

Writing 'module' or 'const' after export default which is incorrect syntax.

Omitting the opening curly brace.

The export default statement must be followed by an object literal starting with {.

4fill in blank

hard

Fill both blanks to configure Tailwind to scan the correct folders.

NextJS

content: ['./[1]/**/*.{js,ts,jsx,tsx}', './[2]/**/*.{js,ts,jsx,tsx}']

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

Aapp

Bpages

Ccomponents

Dpublic

Attempts:

3 left

💡 Hint

Common Mistakes

Including 'public' which is for static files, not code.

Using 'components' which is not scanned by default.

Tailwind scans both the app and pages folders for class names in Next.js projects.

5fill in blank

hard

Fill all three blanks to add Tailwind classes to a Next.js component.

NextJS

export default function Button() {
  return <button className="[1] [2] [3]">Click me</button>;
}

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

Abg-blue-500

Btext-white

Cp-4

Dborder-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using border classes instead of padding.

Missing text color class.

These classes add a blue background, white text, and padding to the button.