Tailwind CSS Typography 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
What is the Tailwind CSS class for making text smaller than the normal size?
Select your answer
Question 2/15
Which class in Tailwind CSS will transform the first letter of each word to uppercase?
Select your answer
Question 3/15
In Tailwind CSS, which class would you use to apply a medium font weight to text?
Select your answer
Question 4/15
How do you make text uppercase in Tailwind CSS?
Select your answer
Question 5/15
What Tailwind CSS class should you use to make text center aligned in responsive design for mobile?
Select your answer
Question 6/15
Which class makes the text color transparent in Tailwind CSS?
Select your answer
Question 7/15
What class would you use to make the text with no special formatting—neither italic nor bold?
Select your answer
Question 8/15
How do you change the text size to the largest pre-defined scale in Tailwind CSS?
Select your answer
Question 9/15
Which class would you use to change the font to a monospace font in Tailwind CSS?
Select your answer
Question 10/15
Which class in Tailwind CSS changes the color of the text to black?
Select your answer
Question 11/15
How do you make text bold in Tailwind CSS?
Select your answer
Question 12/15
What class does Tailwind CSS provide to set the text color to red?
Select your answer
Question 13/15
How do you set the font weight to 900, which is black in Tailwind CSS terms?
Select your answer
Question 14/15
Which class would you use to add a shadow effect to text?
Select your answer
Question 15/15
Which Tailwind CSS class would you use to underline text?
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 Tailwind CSS class for making text smaller than the normal size?
Available answers
The 'text-xs' class in Tailwind CSS decreases the text size to extra small.
Question 2/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which class in Tailwind CSS will transform the first letter of each word to uppercase?
Available answers
The 'capitalize' class in Tailwind CSS capitalizes the first letter of each word.
Question 3/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
In Tailwind CSS, which class would you use to apply a medium font weight to text?
Available answers
Use 'font-medium' to apply medium font weight to text in Tailwind CSS.
Question 4/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How do you make text uppercase in Tailwind CSS?
Available answers
To transform text to uppercase, use the 'uppercase' class in Tailwind CSS.
Question 5/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What Tailwind CSS class should you use to make text center aligned in responsive design for mobile?
Available answers
'Text-center' changes the text alignment to center across all screen sizes, which includes mobile devices.
Question 6/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which class makes the text color transparent in Tailwind CSS?
Available answers
The 'text-transparent' class makes the text color transparent.
Question 7/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What class would you use to make the text with no special formatting—neither italic nor bold?
Available answers
The 'font-normal' class makes text neither bold nor italic by applying standard weight and style.
Question 8/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How do you change the text size to the largest pre-defined scale in Tailwind CSS?
Available answers
The 'text-9xl' class in Tailwind CSS sets the text size to the largest possible pre-defined scale.
Question 9/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which class would you use to change the font to a monospace font in Tailwind CSS?
Available answers
To use a monospace font, apply the 'font-mono' class in Tailwind CSS.
Question 10/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which class in Tailwind CSS changes the color of the text to black?
Available answers
The 'text-black' class sets the text color to black in Tailwind CSS.
Question 11/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How do you make text bold in Tailwind CSS?
Available answers
To make text bold in Tailwind CSS, use the class 'font-bold'.
Question 12/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What class does Tailwind CSS provide to set the text color to red?
Available answers
In Tailwind CSS, text colors are specified using the 'text-' prefix followed by the color and intensity. 'text-red-500' specifies a red color.
Question 13/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How do you set the font weight to 900, which is black in Tailwind CSS terms?
Available answers
In Tailwind CSS, 'font-black' sets the font weight to 900, the heaviest weight available.
Question 14/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which class would you use to add a shadow effect to text?
Available answers
The 'shadow-md' class applies a medium shadow to elements, including text. In Tailwind CSS, shadows apply to the boundary of elements including text when used appropriately.
Question 15/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which Tailwind CSS class would you use to underline text?
Available answers
In Tailwind CSS, use 'underline' to apply an underline text decoration.