Tailwind CSS Basics Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

How can you make text bold in Tailwind CSS?

Select your answer

Question 2/15

How do you apply a margin of 4 in Tailwind CSS?

Select your answer

Question 3/15

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

Select your answer

Question 4/15

Which Tailwind class adds padding on all sides?

Select your answer

Question 5/15

Which class would you use to justify content to the center in a flex container?

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

Which Tailwind CSS class would make an element's text uppercase?

Select your answer

Question 8/15

What is the default mobile-first strategy of Tailwind CSS?

Select your answer

Question 9/15

How do you apply a red background in Tailwind CSS?

Select your answer

Question 10/15

How can you set a full width for an element using Tailwind CSS?

Select your answer

Question 11/15

Which Tailwind CSS class aligns text to the right?

Select your answer

Question 12/15

Which class do you use to make text italic in Tailwind CSS?

Select your answer

Question 13/15

Which Tailwind CSS class applies a shadow to an element?

Select your answer

Question 14/15

How would you make an element hidden using Tailwind CSS?

Select your answer

Question 15/15

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

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
How can you make text bold in Tailwind CSS?

Available answers

The Tailwind CSS class `font-bold` makes text bold.
Question 2/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you apply a margin of 4 in Tailwind CSS?

Available answers

In Tailwind CSS, a margin of 4 is applied using the class `m-4`.
Question 3/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 4/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 5/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which class would you use to justify content to the center in a flex container?

Available answers

The class `justify-center` is used in Tailwind CSS to center content along the main axis in a flex container.
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
Which Tailwind CSS class would make an element's text uppercase?

Available answers

The class `uppercase` in Tailwind CSS transforms text to uppercase.
Question 8/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is the default mobile-first strategy of Tailwind CSS?

Available answers

Tailwind CSS follows a mobile-first strategy, meaning styles are applied from smaller screens and upwards.
Question 9/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 10/15
😊 Your answer was correct 🙁 Your answer was incorrect
How can you set a full width for an element using Tailwind CSS?

Available answers

The class `w-full` is used in Tailwind CSS to set an element's width to 100% of its parent.
Question 11/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which Tailwind CSS class aligns text to the right?

Available answers

Use the `text-right` class in Tailwind CSS to align text to the right.
Question 12/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which class do you use to make text italic in Tailwind CSS?

Available answers

The `italic` class is used in Tailwind CSS to make text italicized.
Question 13/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which Tailwind CSS class applies a shadow to an element?

Available answers

In Tailwind CSS, `shadow` class applies a default shadow to an element.
Question 14/15
😊 Your answer was correct 🙁 Your answer was incorrect
How would you make an element hidden using Tailwind CSS?

Available answers

In Tailwind CSS, the class `hidden` makes an element not displayed on the page.
Question 15/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.