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
What class would you use to make the text with no special formattingβneither italic nor bold?
Select your answer
Question 3/15
Which class in Tailwind CSS changes the color of the text to black?
Select your answer
Question 4/15
Which class would you use to change the text alignment to center?
Select your answer
Question 5/15
How do you set a custom font size using Tailwind CSS?
Select your answer
Question 6/15
What Tailwind CSS class increases the line height of text to 1.75rem for text set at the base font size?
Select your answer
Question 7/15
What class would you use for left-aligning text on small screens only in Tailwind CSS?
Select your answer
Question 8/15
How do you make text bold 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
In Tailwind CSS, what does the 'truncate' class do to text?
Select your answer
Question 11/15
Which class makes the text color transparent in Tailwind CSS?
Select your answer
Question 12/15
What Tailwind CSS class makes text left aligned?
Select your answer
Question 13/15
What Tailwind CSS class should you use to make text center aligned in responsive design for mobile?
Select your answer
Question 14/15
In Tailwind CSS, which class would you use to apply a medium font weight to text?
Select your answer
Question 15/15
Which class would you use to make text lowercase 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
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
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 3/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 4/15
π Your
answer was correct
π Your
answer was incorrect
Which class would you use to change the text alignment to center?
Available answers
The 'text-center' class in Tailwind CSS is used to center-align text.
Question 5/15
π Your
answer was correct
π Your
answer was incorrect
How do you set a custom font size using Tailwind CSS?
Available answers
Custom font sizes can be set using variants such as 'text-[20px]' directly on elements with Tailwind's JIT mode.
Question 6/15
π Your
answer was correct
π Your
answer was incorrect
What Tailwind CSS class increases the line height of text to 1.75rem for text set at the base font size?
Available answers
The 'leading-loose' class in Tailwind CSS sets the line height to a loose spacing, suitable for reading large blocks of text.
Question 7/15
π Your
answer was correct
π Your
answer was incorrect
What class would you use for left-aligning text on small screens only in Tailwind CSS?
Available answers
'sm:text-left' aligns text to the left on small screens only.
Question 8/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 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
In Tailwind CSS, what does the 'truncate' class do to text?
Available answers
The 'truncate' class shortens text and adds an ellipsis if it overflows its container.
Question 11/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 12/15
π Your
answer was correct
π Your
answer was incorrect
What Tailwind CSS class makes text left aligned?
Available answers
The 'text-left' class aligns text to the left in Tailwind CSS.
Question 13/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 14/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 15/15
π Your
answer was correct
π Your
answer was incorrect
Which class would you use to make text lowercase in Tailwind CSS?
Available answers
Use the 'lowercase' class to transform text to lowercase.