Tailwind with Next.js - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that lets you style your web pages by applying small, reusable classes directly in your HTML or JSX. It helps you build designs quickly without writing custom CSS.

beginner

How do you add Tailwind CSS to a Next.js project?

You install Tailwind via npm, create a Tailwind config file, and include Tailwind directives in your global CSS file. Then, you import this CSS in your Next.js app, usually in the _app.js or layout.tsx file.

beginner

Why use Tailwind CSS with Next.js?

Tailwind helps you style components quickly with utility classes, and Next.js makes building React apps easy. Together, they speed up development and keep your styles consistent and maintainable.

intermediate

What is the purpose of the tailwind.config.js file in a Next.js project?

It lets you customize Tailwind’s default settings like colors, fonts, and breakpoints. You can also add plugins or extend utilities to fit your design needs.

intermediate

How do you make a responsive layout using Tailwind in Next.js?

Use Tailwind’s responsive prefixes like sm:, md:, lg: before utility classes to apply styles at different screen sizes. For example, md:text-lg makes text larger on medium screens and up.

Which command installs Tailwind CSS in a Next.js project?

A npm install react tailwindcss

B npm install tailwindcss postcss autoprefixer

C npm install next tailwind

D npm install css tailwind

You need to install tailwindcss along with postcss and autoprefixer for Tailwind to work properly in Next.js.

Where do you import your global Tailwind CSS file in a Next.js app?

A In the _app.js or layout.tsx file

B In every component file

C In the index.html file

D In the tailwind.config.js file

The global CSS file with Tailwind directives is imported once in _app.js or layout.tsx to apply styles app-wide.

What does the class p-4 do in Tailwind CSS?

A Sets font size to 4rem

B Adds margin of 4px

C Adds padding of 4px on all sides

D Adds padding of 1rem on all sides

In Tailwind, p-4 means padding of 1rem (16px by default) on all sides.

How do you apply a style only on medium screens and larger in Tailwind?

A Use the prefix <code>lg:</code>

B Use the prefix <code>sm:</code>

C Use the prefix <code>md:</code> before the class

D Use the prefix <code>xl:</code>

The md: prefix applies styles starting at the medium breakpoint and up.

What is the main benefit of utility-first CSS like Tailwind?

A You write less custom CSS and style directly in HTML/JSX

B It automatically generates animations

C It replaces JavaScript functionality

D It only works with Next.js

Utility-first CSS lets you build designs by applying small classes directly, reducing the need for custom CSS files.

Explain how to set up Tailwind CSS in a new Next.js project from scratch.

Think about the installation steps and where to add styles.

Describe how Tailwind’s responsive prefixes work and give an example.

Focus on how to make designs adapt to screen sizes.