Tailwind CSS Quiz

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