Tailwind CSS Forms and Inputs Quiz
Want to learn more than this quiz offers you? Have a look at my Frontend web
development courses.
Create an account and save your quiz results
Login and save your results
OR
Question 1/15
If you want the input border to disappear on focus, which utility would you use?
Select your answer
Question 2/15
What utility class applies a shadow to an input box?
Select your answer
Question 3/15
How can you remove the outline effect on an input when it is focused?
Select your answer
Question 4/15
What utility class sets the font size of an input text to be large?
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 gives an input field an outline?
Select your answer
Question 7/15
What is the class name for making an input field background transparent?
Select your answer
Question 8/15
How do you apply a light gray border to an input?
Select your answer
Question 9/15
Which class is used to apply a gradient to an input's background?
Select your answer
Question 10/15
What class would change the placeholder color of an input?
Select your answer
Question 11/15
What does the 'hidden' utility class do to an input element?
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
How do you make an input field rounded with Tailwind CSS?
Select your answer
Question 14/15
How can you set an input's background color to blue in Tailwind CSS?
Select your answer
Question 15/15
How might you ensure an input field is disabled using 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
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 2/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 3/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How can you remove the outline effect on an input when it is focused?
Available answers
The 'focus:outline-none' utility class removes the outline effect on focus.
Question 4/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What utility class sets the font size of an input text to be large?
Available answers
The 'text-lg' utility class sets the font size to large in Tailwind CSS.
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 gives an input field an outline?
Available answers
The 'outline' utility class applies an outline to an element.
Question 7/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the class name for making an input field background transparent?
Available answers
The 'bg-transparent' utility class makes the background transparent.
Question 8/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.
Question 9/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which class is used to apply a gradient to an input's background?
Available answers
The 'bg-gradient-to-r' utility class applies a rightward gradient background.
Question 10/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 11/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What does the 'hidden' utility class do to an input element?
Available answers
The 'hidden' utility class hides an element and removes it from the layout.
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
How do you make an input field rounded with Tailwind CSS?
Available answers
The 'rounded' utility class makes an input field have rounded corners.
Question 14/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 15/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How might you ensure an input field is disabled using Tailwind CSS?
Available answers
Using 'disabled:opacity-50' visually indicates a disabled state with 50% opacity.