How Tailwind differs from Bootstrap - Practice Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the main difference in styling approach between Tailwind and Bootstrap?

Both Tailwind and Bootstrap help style websites, but they do it differently. Which option best describes how Tailwind's approach differs from Bootstrap's?

A Tailwind uses JavaScript to style elements, Bootstrap uses only CSS.

B Tailwind provides utility classes for styling small parts, while Bootstrap offers pre-designed components with fixed styles.

C Bootstrap requires writing CSS for every element, Tailwind automatically styles everything without classes.

D Bootstrap is only for mobile apps, Tailwind is only for desktop websites.

💡 Hint

Think about whether you get ready-made buttons or small building blocks to style.

Tailwind gives you small utility classes like p-4 or text-center to build your own design. Bootstrap provides ready-made components like buttons and navbars with fixed styles.

📝 Syntax

intermediate

Which Tailwind class adds padding of 1rem on all sides?

You want to add padding of 1rem (16px) on all sides of a div using Tailwind. Which class should you use?

A p-1rem

B padding-1rem

C p-4

D pad-16

💡 Hint

Tailwind uses numbers to represent spacing scale, not direct units.

In Tailwind, p-4 means padding with the 4th step in the spacing scale, which equals 1rem by default.

❓ layout

advanced

How does Tailwind handle responsive design compared to Bootstrap?

You want to make a layout that changes on small, medium, and large screens. How does Tailwind's approach to responsive design differ from Bootstrap's?

A Tailwind uses prefix classes like <code>sm:</code>, <code>md:</code>, <code>lg:</code> to apply styles at breakpoints; Bootstrap uses separate grid classes for each screen size.

B Tailwind requires writing media queries manually; Bootstrap automatically adjusts layout without classes.

C Bootstrap uses JavaScript to detect screen size; Tailwind uses CSS variables.

D Tailwind only supports mobile-first design; Bootstrap only supports desktop-first.

💡 Hint

Think about how you add classes that only apply on certain screen widths.

Tailwind uses prefixes like sm: to apply styles at specific breakpoints, making it easy to write responsive styles inline. Bootstrap uses grid classes like col-md-6 to control layout per screen size.

❓ accessibility

advanced

Which statement about accessibility support in Tailwind vs Bootstrap is true?

Accessibility means making websites usable by everyone, including people using keyboards or screen readers. Which is true about how Tailwind and Bootstrap support accessibility?

A Tailwind automatically adds ARIA labels to all elements; Bootstrap does not.

B Bootstrap components are not accessible; Tailwind components are fully accessible out of the box.

C Both Tailwind and Bootstrap disable keyboard navigation by default.

D Bootstrap provides accessible components by default; Tailwind requires developers to add accessibility features manually.

💡 Hint

Think about whether accessibility is built into components or left to the developer.

Bootstrap's pre-built components include accessibility features like ARIA roles and keyboard support. Tailwind provides styling utilities but leaves accessibility implementation to the developer.

❓ selector

expert

What is the rendered color of this Tailwind button?

Consider this HTML snippet styled with Tailwind:

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

What color will the button background be when the mouse is NOT hovering over it?

A A medium blue color (#3b82f6)

B A dark blue color (#1e40af)

C White

D Transparent

💡 Hint

Look at the class starting with bg- without the hover: prefix.

The class bg-blue-500 sets the background to a medium blue color. The hover:bg-blue-700 changes it to a darker blue only on hover.

Practice

1. Which statement best describes the main difference between Tailwind and Bootstrap?

easy

A. Both Tailwind and Bootstrap only provide pre-built components.

B. Bootstrap uses utility classes, and Tailwind provides pre-built components.

C. Tailwind uses utility classes for styling, while Bootstrap offers pre-built components.

D. Tailwind and Bootstrap are identical in how they style elements.

Solution

1. Step 1: Understand Tailwind's approach

   Tailwind focuses on utility classes that style elements directly in HTML.

2. Step 2: Understand Bootstrap's approach

   Bootstrap provides ready-made UI components with combined styles for quick use.

3. Final Answer:

   Tailwind uses utility classes for styling, while Bootstrap offers pre-built components. -> Option C

4. Quick Check:

   Utility classes = Tailwind, Pre-built components = Bootstrap [OK]

Hint: Tailwind = utilities, Bootstrap = components [OK]

Common Mistakes:

• Confusing which framework uses utility classes
• Thinking both provide only components
• Assuming they are the same

2. Which of the following is a correct Tailwind class to add padding of 1rem to an element?

easy

A. p-4

B. padding-1rem

C. pad-4

D. p-1rem

Solution

1. Step 1: Recall Tailwind padding scale

   Tailwind uses numeric scale like p-1, p-2, p-4 where p-4 equals 1rem padding.

2. Step 2: Check options for correct syntax

   Only p-4 matches Tailwind's padding class for 1rem.

3. Final Answer:

   p-4 -> Option A

4. Quick Check:

   p-4 means padding 1rem in Tailwind [OK]

Hint: Tailwind padding uses p-[number], p-4 = 1rem [OK]

Common Mistakes:

• Using CSS style names like padding-1rem
• Adding units directly in class names
• Confusing Tailwind scale numbers

3. What will be the background color of this element using Tailwind?

<div class="bg-blue-500 hover:bg-blue-700 text-white p-4">Button</div>

medium

A. Blue background that becomes darker blue on hover

B. White background with blue text

C. No background color, only padding

D. Red background that changes to blue on hover

Solution

1. Step 1: Analyze the background classes

   bg-blue-500 sets a medium blue background; hover:bg-blue-700 changes background to a darker blue on hover.

2. Step 2: Check text and padding

   text-white makes text white; p-4 adds padding. So background is blue, text white, changes on hover.

3. Final Answer:

   Blue background that becomes darker blue on hover -> Option A

4. Quick Check:

   bg-blue-500 + hover:bg-blue-700 = blue to darker blue [OK]

Hint: bg-color + hover:bg-color changes background on hover [OK]

Common Mistakes:

• Ignoring hover effect
• Mixing text and background colors
• Assuming no background color

4. Identify the error in this Tailwind usage:

<button class="btn btn-primary p-4">Click</button>

medium

A. Button tag cannot have classes in Tailwind

B. Tailwind does not have btn or btn-primary classes by default

C. Padding class p-4 is invalid in Tailwind

D. Class names must be separated by commas

Solution

1. Step 1: Check class names against Tailwind defaults

   Tailwind uses utility classes like p-4, but btn and btn-primary are Bootstrap classes, not Tailwind.

2. Step 2: Validate other class usage

   p-4 is valid padding in Tailwind; button tags can have classes; classes are space-separated.

3. Final Answer:

   Tailwind does not have btn or btn-primary classes by default -> Option B

4. Quick Check:

   btn classes = Bootstrap, not Tailwind [OK]

Hint: Tailwind uses utility classes, not btn-primary [OK]

Common Mistakes:

• Assuming Bootstrap classes work in Tailwind
• Thinking p-4 is invalid
• Confusing class separators

5. You want a custom card component with a shadow, rounded corners, and padding using Tailwind. Which class combination is best to achieve this?

hard

A. "card shadow rounded p-6"

B. "container box p-6 shadow-md"

C. "btn btn-primary p-6 rounded"

D. "shadow-lg rounded-lg p-6 bg-white"

Solution

1. Step 1: Identify Tailwind utility classes for shadow, rounding, padding

   shadow-lg adds a large shadow, rounded-lg adds rounded corners, p-6 adds padding, and bg-white sets background color.

2. Step 2: Check other options for correctness

   "card shadow rounded p-6" uses card which is not Tailwind; "btn btn-primary p-6 rounded" uses Bootstrap classes; "container box p-6 shadow-md" uses container and box which are not for card styling.

3. Final Answer:

   "shadow-lg rounded-lg p-6 bg-white" -> Option D

4. Quick Check:

   shadow-lg + rounded-lg + p-6 = custom card style [OK]

Hint: Use shadow-lg, rounded-lg, p-6 for custom card [OK]

Common Mistakes:

• Using Bootstrap classes in Tailwind
• Missing shadow or rounding classes
• Confusing container with card