How Tailwind differs from Bootstrap - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a Tailwind class that makes text bold.

Tailwind

<p class="[1]">This text is bold.</p>

Drag options to blanks, or click blank then click option'

Afont-bold

Btext-bold

Cfont-heavy

Dbold-text

Attempts:

3 left

💡 Hint

Common Mistakes

Using Bootstrap class names like 'text-bold' instead of Tailwind's 'font-bold'.

In Tailwind, font-bold makes text bold. Other options are not valid Tailwind classes.

2fill in blank

medium

Complete the code to add a Bootstrap class that makes text bold.

Tailwind

<p class="[1]">This text is bold.</p>

Drag options to blanks, or click blank then click option'

Afw-bold

Bfont-bold

Ctext-bold

Dfont-heavy

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing Tailwind's 'font-bold' with Bootstrap's class.

Bootstrap uses fw-bold to make text bold. Tailwind uses font-bold.

3fill in blank

hard

Fix the error in the Tailwind button code by completing the missing class.

Tailwind

<button class="bg-blue-500 text-white py-2 px-4 rounded [1]">Click me</button>

Drag options to blanks, or click blank then click option'

Ahover:bg-blue

Bhover:bg-blue-700

Chover-blue

Dhover-blue-700

Attempts:

3 left

💡 Hint

Common Mistakes

Missing colon after 'hover', or incomplete color class.

In Tailwind, hover states use the prefix hover: followed by the class. So hover:bg-blue-700 is correct.

4fill in blank

hard

Fill both blanks to create a responsive grid with Tailwind that has 3 columns on medium screens and 1 column on small screens.

Tailwind

<div class="grid [1] [2] gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Drag options to blanks, or click blank then click option'

Agrid-cols-1

Bgrid-cols-3

Cmd:grid-cols-3

Dsm:grid-cols-1

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'sm:grid-cols-1' is redundant because default applies to small screens.

Use grid-cols-1 for small screens (default) and md:grid-cols-3 for medium screens and up.

5fill in blank

hard

Fill all three blanks to create a Bootstrap button with primary color, large size, and rounded corners.

Tailwind

<button class="btn [1] [2] [3]">Submit</button>

Drag options to blanks, or click blank then click option'

Abtn-primary

Bbtn-lg

Crounded

Dbtn-large

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'btn-large' which is not a Bootstrap class.

Bootstrap uses btn-primary for primary color, btn-lg for large size, and rounded for rounded corners.

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