Why framework integration matters in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add Tailwind CSS classes to center the text inside a <div>.

Tailwind

<div class="[1]">Hello, world!</div>

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

Atext-justify

Btext-left

Ctext-right

Dtext-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-left or text-right which align text to sides instead of center.

Using text-justify which spreads text to fill the line.

The Tailwind class text-center centers the text horizontally inside the element.

2fill in blank

medium

Complete the code to make a button with Tailwind that has a blue background and white text.

Tailwind

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

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

Ared

Bblue-500

Cgreen

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a color other than blue for the background.

Confusing text color with background color.

The class bg-blue-500 sets the background color to blue, and text-white sets the text color to white. Here, only the background color blank is asked, so 'blue-500' is correct.

3fill in blank

hard

Fix the error in the Tailwind class to make the text bold and italic.

Tailwind

<p class="font-[1] italic">Stylish text</p>

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

Abold

Bnormal

Clight

Dmedium

Attempts:

3 left

💡 Hint

Common Mistakes

Using font-normal which does not make text bold.

Using font-light which makes text thinner.

The Tailwind class font-bold makes the text bold. Combined with italic, it styles the text as bold and italic.

4fill in blank

hard

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

Tailwind

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

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

Agrid-cols-1

Bgrid-cols-2

Cmd:grid-cols-3

Dsm:grid-cols-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'sm:grid-cols-3' which applies on small screens, not medium.

Using 'grid-cols-2' which sets 2 columns instead of 1.

The class grid-cols-1 sets 1 column by default (small screens). The class md:grid-cols-3 changes the grid to 3 columns on medium screens and larger.

5fill in blank

hard

Fill all three blanks to create a button that is green with white text, rounded corners, and padding.

Tailwind

<button class="bg-[1] text-[2] rounded-[3] px-4 py-2">Submit</button>

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

Ablue

Bwhite

Cmd

Dgreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using blue instead of green for background.

Using 'rounded-lg' or 'rounded-sm' instead of 'rounded-md'.

The class bg-green sets a green background, text-white makes the text white, and rounded-md adds medium rounded corners for a nice shape.