Tailwind with React components - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides small, reusable classes to style HTML elements quickly without writing custom CSS.

beginner

How do you apply Tailwind styles in a React component?

You add Tailwind utility classes to the className attribute of JSX elements inside React components.

beginner

Why use className instead of class in React?

React uses <code>className</code> because <code>class</code> is a reserved word in JavaScript. <code>className</code> sets the HTML class attribute.

intermediate

What is the benefit of using Tailwind with React components?

It allows fast styling with consistent design, avoids writing custom CSS files, and keeps styles close to the component code for easier maintenance.

intermediate

How can you make a React component responsive using Tailwind?

Use Tailwind's responsive prefixes like sm:, md:, lg: before utility classes to apply styles at different screen sizes.

Which attribute do you use to add Tailwind classes in a React component?

A className

B class

C style

D id

React uses className to assign CSS classes because class is a reserved JavaScript word.

What does the Tailwind class bg-blue-500 do?

A Sets text color to blue

B Sets background color to a medium blue

C Adds a blue border

D Makes the element blue on hover

bg-blue-500 sets the background color to a specific shade of blue in Tailwind's palette.

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

A md: before the class

B sm: before the class

C lg: after the class

D Use media queries in CSS

Tailwind uses prefixes like md: to apply styles at medium screen sizes and above.

Which of these is a benefit of using Tailwind with React?

A Styles are inline and hard to maintain

B Tailwind does not support React

C You write less CSS and style faster

D You must write custom CSS for every component

Tailwind lets you style quickly using utility classes, reducing the need for custom CSS.

What is the correct way to add multiple Tailwind classes in React JSX?

A class="p-4 bg-red-300 text-center"

B className={p-4 bg-red-300 text-center}

C style="p-4 bg-red-300 text-center"

D className="p-4 bg-red-300 text-center"

Multiple classes are added as a single string inside className with spaces separating them.

Explain how to use Tailwind CSS classes inside a React component to style a button.

Think about how you add CSS classes in HTML and how React uses className.

Describe how Tailwind helps make React components responsive.

Consider how screen size changes the look of a website.