Tailwind CSS Forms and Inputs Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

What is the purpose of the 'border' utility in Tailwind CSS?

Select your answer

Question 2/15

Which utility class is used to hide an input element visually?

Select your answer

Question 3/15

What class would change the placeholder color of an input?

Select your answer

Question 4/15

What utility makes sure an input text is aligned to the center?

Select your answer

Question 5/15

Which utility class would give an input six-pixel-wide borders?

Select your answer

Question 6/15

Which utility class would you use to increase the space inside your input element?

Select your answer

Question 7/15

How can you set an input's background color to blue in Tailwind CSS?

Select your answer

Question 8/15

Which utility helps you make an input take full width of its parent?

Select your answer

Question 9/15

Which utility would you use to give an input a margin of 16 pixels?

Select your answer

Question 10/15

Which utility class gives an input field an outline?

Select your answer

Question 11/15

Which class sets the position of an input field relative within its container?

Select your answer

Question 12/15

How do you ensure an input has a large shadow in Tailwind CSS?

Select your answer

Question 13/15

If you want the input border to disappear on focus, which utility would you use?

Select your answer

Question 14/15

What utility class applies a shadow to an input box?

Select your answer

Question 15/15

How do you apply a light gray border to an input?

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 is the purpose of the 'border' utility in Tailwind CSS?

Available answers

The 'border' utility in Tailwind CSS is used to apply a border to an element.
Question 2/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which utility class is used to hide an input element visually?

Available answers

The 'invisible' utility class hides an element visually but keeps it in the layout.
Question 3/15
😊 Your answer was correct 🙁 Your answer was incorrect
What class would change the placeholder color of an input?

Available answers

The 'placeholder-gray-500' utility class changes the placeholder text color.
Question 4/15
😊 Your answer was correct 🙁 Your answer was incorrect
What utility makes sure an input text is aligned to the center?

Available answers

'text-center' utility class ensures that text is centered within its container.
Question 5/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which utility class would give an input six-pixel-wide borders?

Available answers

Tailwind's default scale goes up to 'border-8', so 'border-2' gives a 2-pixel border.
Question 6/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which utility class would you use to increase the space inside your input element?

Available answers

The 'p-4' utility class adds padding inside the input element, increasing space.
Question 7/15
😊 Your answer was correct 🙁 Your answer was incorrect
How can you set an input's background color to blue in Tailwind CSS?

Available answers

The 'bg-blue-500' utility class sets the background color of the input to blue.
Question 8/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which utility helps you make an input take full width of its parent?

Available answers

The 'w-full' utility class makes an element take the full width of its parent container.
Question 9/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which utility would you use to give an input a margin of 16 pixels?

Available answers

The 'm-4' utility class sets an element's margin to 16 pixels.
Question 10/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which utility class gives an input field an outline?

Available answers

The 'outline' utility class applies an outline to an element.
Question 11/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which class sets the position of an input field relative within its container?

Available answers

The 'relative' utility class positions an element relative to its normal position.
Question 12/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you ensure an input has a large shadow in Tailwind CSS?

Available answers

The 'shadow-lg' utility class in Tailwind CSS adds a large shadow to an element.
Question 13/15
😊 Your answer was correct 🙁 Your answer was incorrect
If you want the input border to disappear on focus, which utility would you use?

Available answers

The 'focus:border-transparent' utility class makes the border disappear on focus.
Question 14/15
😊 Your answer was correct 🙁 Your answer was incorrect
What utility class applies a shadow to an input box?

Available answers

The 'shadow-md' utility class adds a medium shadow to the input box.
Question 15/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you apply a light gray border to an input?

Available answers

The 'border-gray-200' utility class applies a light gray border to an element.