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.