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.

Practice

1. What is the main tool used to install Tailwind CSS in a project?

easy

A. docker

B. git

C. npm

D. pip

Solution

1. Step 1: Understand package managers

   Tailwind CSS is a Node.js-based tool, so it uses npm to install packages.

2. Step 2: Identify the correct tool for Tailwind

   npm is the standard package manager for JavaScript projects, including Tailwind.

3. Final Answer:

   npm -> Option C

4. Quick Check:

   Tailwind installation uses npm [OK]

Hint: Tailwind is a JS tool, so use npm to install [OK]

Common Mistakes:

• Confusing npm with git which is for version control
• Using pip which is for Python packages
• Thinking docker installs packages directly

2. Which command correctly installs Tailwind CSS using npm?

easy

A. npm get tailwindcss

B. npm tailwindcss install

C. install npm tailwindcss

D. npm install tailwindcss

Solution

1. Step 1: Recall npm install syntax

   The correct npm command to add a package is npm install <package-name>.

2. Step 2: Match the command with Tailwind package

   npm install tailwindcss correctly installs Tailwind CSS.

3. Final Answer:

   npm install tailwindcss -> Option D

4. Quick Check:

   npm install tailwindcss is correct [OK]

Hint: npm install + package name installs it [OK]

Common Mistakes:

• Putting 'install' after package name
• Using 'get' instead of 'install'
• Wrong command order

3. After installing Tailwind CSS, which file is typically created to customize Tailwind settings?

medium

A. tailwind.config.js

B. package.json

C. index.html

D. style.css

Solution

1. Step 1: Identify configuration files

   Tailwind uses a config file named tailwind.config.js to customize its behavior.

2. Step 2: Differentiate from other files

   package.json manages packages, index.html is the webpage, and style.css holds styles but not Tailwind config.

3. Final Answer:

   tailwind.config.js -> Option A

4. Quick Check:

   Tailwind config file = tailwind.config.js [OK]

Hint: Tailwind config file ends with .config.js [OK]

Common Mistakes:

• Confusing package.json with config file
• Thinking style.css holds Tailwind config
• Assuming index.html is config

4. You added Tailwind directives in your CSS but styles are not applying. What is a common mistake?

medium

A. Using @tailwind instead of @import

B. Not running the build process to generate CSS

C. Including Tailwind CSS twice in HTML

D. Writing Tailwind classes in HTML

Solution

1. Step 1: Understand Tailwind CSS build process

   Tailwind requires running a build tool (like PostCSS) to process directives and generate final CSS.

2. Step 2: Identify why styles don't apply

   If you add directives but skip the build step, no CSS is generated, so styles won't show.

3. Final Answer:

   Not running the build process to generate CSS -> Option B

4. Quick Check:

   Build process missing = no styles applied [OK]

Hint: Always run build after adding Tailwind directives [OK]

Common Mistakes:

• Confusing @tailwind with @import usage
• Including Tailwind CSS multiple times causes no effect
• Thinking writing classes alone applies styles

5. You want to use Tailwind CSS in a new project with minimal setup. Which steps should you follow in order?

hard

A. Run npm install tailwindcss, create tailwind.config.js, add Tailwind directives in CSS, then run build

B. Create tailwind.config.js, add Tailwind directives, run build, then install Tailwind CSS

C. Add Tailwind directives in CSS, run build, then install Tailwind CSS and create config

D. Run build, install Tailwind CSS, create config, then add directives

Solution

1. Step 1: Install Tailwind CSS package

   First, use npm install tailwindcss to add Tailwind to your project.

2. Step 2: Create configuration file

   Next, create tailwind.config.js to customize Tailwind settings.

3. Step 3: Add Tailwind directives in your CSS

   Include @tailwind base;, @tailwind components;, and @tailwind utilities; in your CSS file.

4. Step 4: Run the build process

   Finally, run the build tool to generate the final CSS with Tailwind styles.

5. Final Answer:

   Run npm install tailwindcss, create tailwind.config.js, add Tailwind directives in CSS, then run build -> Option A

6. Quick Check:

   Install -> Config -> Directives -> Build [OK]

Hint: Follow install, config, directives, then build order [OK]

Common Mistakes:

• Running build before installing Tailwind
• Adding directives before creating config
• Skipping config file creation