Tailwind CSS Quiz
Tailwind CSS is a utility-first framework where you style elements by combining small classes. This quiz covers core utilities, responsive prefixes, state variants, configuration and the reasoning behind the utility-first approach.
What this quiz covers
- Utility-first concept
- Spacing, colour and typography utilities
- Responsive and state variants
- Configuration and customisation
Study tip: Recreate a simple card or navbar using only utility classes; repetition builds the vocabulary faster than reading the docs.
Questions, answers and explanations
1. What is Tailwind CSS?
- A JavaScript Framework
- A Utility-First CSS Framework
- A Database
- A Programming Language
Answer: A Utility-First CSS Framework
Tailwind CSS is a utility-first CSS framework used to rapidly build custom user interfaces.
2. Who developed Tailwind CSS?
- Evan You
- Adam Wathan
- Brendan Eich
- Mark Otto
Answer: Adam Wathan
Tailwind CSS was created by Adam Wathan.
3. Which command installs Tailwind CSS using npm?
- npm install bootstrap
- npm install tailwindcss
- npm install css
- npm install react
Answer: npm install tailwindcss
Tailwind CSS is installed using npm install tailwindcss.
4. Which class sets the background color to blue?
- bg-blue-500
- text-blue-500
- border-blue-500
- blue-bg
Answer: bg-blue-500
The bg-blue-500 utility applies a blue background.
5. Which class changes text color to red?
- text-red-500
- bg-red-500
- font-red
- red-text
Answer: text-red-500
The text-red-500 utility changes text color to red.
6. Which class makes text bold?
- font-bold
- text-bold
- bold
- fw-bold
Answer: font-bold
The font-bold utility applies bold font weight.
7. Which class centers text?
- text-center
- center
- align-center
- text-middle
Answer: text-center
The text-center utility aligns text to the center.
8. Which class adds padding on all sides?
- p-4
- m-4
- padding-4
- space-4
Answer: p-4
The p-* utilities add padding.
9. Which class adds margin on all sides?
- m-4
- p-4
- margin-4
- space-4
Answer: m-4
The m-* utilities add margin.
10. Which class creates rounded corners?
- rounded
- radius
- border-round
- curve
Answer: rounded
The rounded utility applies rounded corners.
11. Which Tailwind CSS class sets display to flex?
- flex
- display-flex
- d-flex
- flexbox
Answer: flex
The flex utility applies display: flex.
12. Which class aligns items vertically in the center?
- items-center
- align-center
- justify-center
- center-items
Answer: items-center
The items-center utility aligns flex items along the cross axis.
13. Which class horizontally centers flex items?
- justify-center
- items-center
- align-center
- content-center
Answer: justify-center
The justify-center utility centers items along the main axis.
14. Which class makes an element take the full screen height?
- h-screen
- h-full
- screen-height
- full-height
Answer: h-screen
The h-screen utility sets height to 100vh.
15. Which class sets the width to 100%?
- w-full
- full-width
- width-full
- w-screen
Answer: w-full
The w-full utility sets width to 100%.
16. Which class applies a shadow to an element?
- shadow
- box-shadow
- shadow-md
- Both shadow and shadow-md
Answer: Both shadow and shadow-md
Tailwind provides multiple shadow utilities like shadow, shadow-md, shadow-lg, etc.
17. Which class changes the font size to extra large?
- text-xl
- font-xl
- xl-text
- text-large
Answer: text-xl
The text-xl utility sets the font size to extra large.
18. Which class rounds an element into a full circle?
- rounded-full
- rounded-circle
- circle
- full-rounded
Answer: rounded-full
The rounded-full utility creates fully rounded elements.
19. Which class adds a hover background color?
- hover:bg-blue-500
- bg-hover-blue
- hover-blue
- bg-blue-hover
Answer: hover:bg-blue-500
The hover: variant applies styles when the user hovers over the element.
20. Which Tailwind CSS feature removes unused CSS in production builds?
- Purge
- Minify
- Optimize
- Bundle
Answer: Purge
Tailwind removes unused CSS during production using its content scanning (formerly called PurgeCSS).