Tailwind CSS integration in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Tailwind CSS apply styles in Astro components?

Given an Astro component using Tailwind CSS classes, what will be the visual output of the button below?

Astro

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me</button>

A A red button with white text that becomes lighter red on hover and has square corners

B A button with no background color and black text that changes to gray on hover

C A blue button with white bold text that darkens blue on hover and has rounded corners

D A green button with white text that becomes darker green on hover and has sharp edges

💡 Hint

Look at the Tailwind classes: bg-blue-500 sets background, hover:bg-blue-700 changes it on hover, text-white sets text color, font-bold makes text bold, py-2 and px-4 add padding, rounded adds border radius.

The classes define a blue background that darkens on hover, white bold text, padding for size, and rounded corners for shape.

📝 Syntax

intermediate

Which Tailwind CSS config snippet correctly enables JIT mode in Astro?

Choose the correct Tailwind CSS configuration code to enable Just-In-Time (JIT) mode in an Astro project.

A export const config = { mode: 'just-in-time', content: ['./src/**/*'] }

B export default { jit: true, files: ['./src/**/*.{astro,js}'] }

C module.exports = { jitMode: true, paths: ['./src/**/*'] }

D module.exports = { mode: 'jit', content: ['./src/**/*.{astro,js,jsx,ts,tsx}'] }

💡 Hint

JIT mode is enabled by setting mode: 'jit' and specifying content paths in tailwind.config.js.

Option D uses the correct syntax for Tailwind CSS v2 to enable JIT mode and specify content files for purging unused styles.

🔧 Debug

advanced

Why does Tailwind CSS not apply styles in this Astro component?

This Astro component uses Tailwind classes but the styles do not appear in the browser. What is the most likely cause?

Astro

<div class="text-center p-4">
  <h1 class="text-3xl font-bold">Welcome</h1>
</div>

A The class names are misspelled and do not match Tailwind's classes

B Tailwind CSS is not imported or configured properly in the Astro project

C Astro does not support Tailwind CSS classes inside <div> elements

D The browser does not support CSS classes with hyphens

💡 Hint

Check if Tailwind CSS is installed and linked correctly in the project setup.

If Tailwind CSS is not imported or configured, the classes will not generate any styles, so the component looks unstyled.

❓ state_output

advanced

What is the rendered output of this Astro component using Tailwind and conditional classes?

Consider this Astro component code snippet. What will be the class attribute of the

Astro

---
const isActive = false;
---
<button class={`py-2 px-4 rounded ${isActive ? 'bg-green-500' : 'bg-gray-500'}`}>Submit</button>

A py-2 px-4 rounded bg-gray-500

B py-2 px-4 rounded bg-green-500

C bg-green-500 py-2 px-4 rounded

D py-2 px-4 rounded

💡 Hint

The template literal adds bg-green-500 if isActive is true, else bg-gray-500.

Since isActive is false, the class string includes bg-gray-500 along with padding and rounded classes.

🧠 Conceptual

expert

How does Tailwind CSS optimize CSS size in Astro projects?

Which mechanism does Tailwind CSS use to keep the final CSS bundle small when integrated with Astro?

A It uses a purge process scanning Astro files to remove unused CSS classes

B It compiles all possible CSS classes into one large file regardless of usage

C It disables all responsive utilities to reduce CSS size

D It requires manual deletion of unused CSS classes in the source files

💡 Hint

Think about how Tailwind removes unused styles automatically during build.

Tailwind scans the content files (including Astro components) to detect used classes and removes unused ones, minimizing CSS size.