Tailwind CSS Basics Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

What class is used for full-height in Tailwind CSS?

Select your answer

Question 2/15

Which class would you use to create a flex container in Tailwind CSS?

Select your answer

Question 3/15

How do you apply a border-radius in Tailwind CSS?

Select your answer

Question 4/15

Which of the following is a feature of Tailwind CSS?

Select your answer

Question 5/15

Which Tailwind class adds padding on all sides?

Select your answer

Question 6/15

What class makes an element take up half the width of its container in Tailwind CSS?

Select your answer

Question 7/15

How can you set an element's opacity to 50% in Tailwind CSS?

Select your answer

Question 8/15

How do you apply a red background in Tailwind CSS?

Select your answer

Question 9/15

Which Tailwind CSS class applies a shadow with maximum intensity?

Select your answer

Question 10/15

How can you make text bold in Tailwind CSS?

Select your answer

Question 11/15

Which class is used for vertical alignment using flex in Tailwind CSS?

Select your answer

Question 12/15

How do you apply an inline-flex layout in Tailwind CSS?

Select your answer

Question 13/15

How do you change the font size to large in Tailwind CSS?

Select your answer

Question 14/15

What class sets an element to display as a block in Tailwind CSS?

Select your answer

Question 15/15

What is the equivalent Tailwind CSS class for setting text color to blue with 500 intensity?

Select your answer

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15
😊 Your answer was correct 🙁 Your answer was incorrect
What class is used for full-height in Tailwind CSS?

Available answers

In Tailwind CSS, `h-full` makes an element take up full height of its parent.
Question 2/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which class would you use to create a flex container in Tailwind CSS?

Available answers

To create a flex container in Tailwind CSS, use the `flex` class.
Question 3/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you apply a border-radius in Tailwind CSS?

Available answers

In Tailwind CSS, the `rounded` class is used to apply a default border radius.
Question 4/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which of the following is a feature of Tailwind CSS?

Available answers

Tailwind CSS employs a utility-first approach, allowing developers to use utility classes to build designs directly in their markup.
Question 5/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which Tailwind class adds padding on all sides?

Available answers

The `p-4` class in Tailwind CSS applies padding of 4 units on all sides of an element.
Question 6/15
😊 Your answer was correct 🙁 Your answer was incorrect
What class makes an element take up half the width of its container in Tailwind CSS?

Available answers

The `w-1/2` class in Tailwind CSS sets the width of an element to 50% of its container.
Question 7/15
😊 Your answer was correct 🙁 Your answer was incorrect
How can you set an element's opacity to 50% in Tailwind CSS?

Available answers

Use the `opacity-50` class in Tailwind CSS to set an element's opacity to 50%.
Question 8/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you apply a red background in Tailwind CSS?

Available answers

In Tailwind CSS, the class `bg-red-500` is used to apply a red background to an element.
Question 9/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which Tailwind CSS class applies a shadow with maximum intensity?

Available answers

The class `shadow-lg` in Tailwind CSS applies a large shadow to an element.
Question 10/15
😊 Your answer was correct 🙁 Your answer was incorrect
How can you make text bold in Tailwind CSS?

Available answers

The Tailwind CSS class `font-bold` makes text bold.
Question 11/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which class is used for vertical alignment using flex in Tailwind CSS?

Available answers

The `items-center` class centers elements vertically within a flex container in Tailwind CSS.
Question 12/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you apply an inline-flex layout in Tailwind CSS?

Available answers

In Tailwind CSS, the `inline-flex` class sets the layout type to inline-flex.
Question 13/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you change the font size to large in Tailwind CSS?

Available answers

The class `text-lg` in Tailwind CSS sets the font size to large.
Question 14/15
😊 Your answer was correct 🙁 Your answer was incorrect
What class sets an element to display as a block in Tailwind CSS?

Available answers

In Tailwind CSS, the class `block` is used to set an element's display to block.
Question 15/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is the equivalent Tailwind CSS class for setting text color to blue with 500 intensity?

Available answers

In Tailwind CSS, `text-blue-500` sets the text color to blue at the 500 shade level.