NEW
Font size
WorksheetsTailwind CSS Quiz
Total questions: 10
Worksheet time: 2mins
Which utility class in Tailwind CSS sets a full-width container with padding on the sides?
container-fluid
full-width
container
max-w-screen
What does the md: prefix indicate in Tailwind CSS?
It applies styles only in dark mode
It applies styles at the medium (md) breakpoint
It modifies margin and padding
It stands for "mobile device"
Which Tailwind class applies a flexbox layout with items centered horizontally and vertically?
flex center
flex justify-center items-center
flexbox middle
flex-align-center
How do you apply a hover effect that changes text color to blue in Tailwind?
hover:text-blue
hover:color-blue
hover:text-blue-500
text-hover-blue
Which Tailwind utility sets a shadow around an element?
shadow-sm
box-shadow
drop-shadow
glow
What is the correct way to add custom colors in Tailwind CSS?
Modify the colors.js file
Extend the theme in tailwind.config.js
Use inline CSS
Import a separate CSS file
Which Tailwind class makes an element take up the remaining space in a flex container?
flex-grow
flex-auto
flex-expand
flex-remaining
What does the @apply directive do in Tailwind CSS?
It imports external stylesheets
It applies JavaScript functions
It extracts reusable styles into CSS classes
It enables animations
Which utility sets a responsive grid with 3 equal-width columns?
grid-3
grid-cols-3
grid-template-3
cols-3
How do you enable dark mode in Tailwind CSS?
darkMode: 'class' in tailwind.config.js
mode: 'dark'
theme: 'dark'
@dark media query
