Tailwind CSS Typography Quiz

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.