Tailwind installation and setup - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the purpose of the tailwind.config.js file?

In a Tailwind CSS project, what does the tailwind.config.js file do?

A It is the main CSS file where Tailwind styles are written manually.

B It contains the HTML structure of the website using Tailwind classes.

C It defines custom settings like colors, fonts, and screen sizes for Tailwind to use.

D It installs Tailwind CSS packages automatically when the project starts.

💡 Hint

Think about where you tell Tailwind about your design choices.

The tailwind.config.js file lets you customize Tailwind's default design system, like adding new colors or breakpoints.

📝 Syntax

intermediate

Which command correctly installs Tailwind CSS via npm?

You want to add Tailwind CSS to your project using npm. Which command should you run?

A npm get tailwindcss

B npm install tailwindcss.css

C npm add tailwindcss

D npm install tailwindcss postcss autoprefixer

💡 Hint

Tailwind needs PostCSS and Autoprefixer to work properly.

The correct command installs Tailwind CSS along with PostCSS and Autoprefixer, which Tailwind requires to process CSS.

❓ rendering

advanced

What will be the visual result after running this Tailwind setup code?

Given this minimal Tailwind CSS setup in your CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

And this HTML:

<button class="bg-blue-500 text-white p-4 rounded">Click Me</button>

What will you see in the browser?

A A blue button with white text, padding around text, and rounded corners.

B A plain button with default browser styles and no colors or padding.

C A button with blue text on white background and no padding.

D An error message because Tailwind directives are missing.

💡 Hint

Tailwind utilities like bg-blue-500 add background color.

The Tailwind directives import base styles, components, and utilities. The button classes apply a blue background, white text, padding, and rounded corners.

❓ selector

advanced

Which Tailwind config option controls which files are scanned for class names?

In tailwind.config.js, which option tells Tailwind which files to look at to find CSS classes you use?

A content

B theme

C plugins

D variants

💡 Hint

This option lists your HTML, JS, and other files for Tailwind to scan.

The content option is an array of file paths where Tailwind looks for class names to include in the final CSS.

❓ accessibility

expert

How to ensure a Tailwind-styled button is accessible?

You have a button styled with Tailwind classes. Which practice improves its accessibility the most?

A Avoid using focus styles to keep the design clean.

B Add <code>aria-label</code> if the button text is not descriptive.

C Use only color classes like <code>bg-red-500</code> to show importance.

D Use <code>hidden</code> class to hide the button visually but keep it clickable.

💡 Hint

Screen readers need clear labels to understand buttons.

Adding aria-label helps screen readers describe buttons when visible text is unclear or missing, improving accessibility.