Tailwind CSS Quiz

1 / 20

How do you make an element take up the full width of its container using a Tailwind utility class?

width: 100%;

w-100

w-full

width-full

2 / 20

How do you apply a padding of 4 to the top and bottom of an element?

padding-y-4

p-y-4

py-4

pt-4 pb-4

3 / 20

Which utility class is used to change an element's position to `position: absolute;`?

pos-absolute

absolute-position

p-absolute

absolute

4 / 20

Which utility class is used to make an element invisible without removing it from the document flow?

display-none

hidden

opacity-0

invisible

5 / 20

What is the purpose of the `group` class in Tailwind CSS?

To create a container for a group of images.

To create a responsive grid layout

To enable a parent element to style its children based on a state like `hover` or `focus`.

To apply a group of styles to a single element.

6 / 20

How do you add a custom color to your Tailwind CSS configuration?

You can't add custom colors; you can only use the predefined ones.

By adding a new class directly to the HTML file with a hex code.

By using the `@apply` directive in a separate CSS file.

By modifying the `theme` property in the `tailwind.config.js` file.

7 / 20

How do you apply a `padding-right` of 6?

p-right-6

pr-6

px-6

padding-right-6

8 / 20

How do you set the `font-weight` to `bold` in Tailwind CSS?

bold

font-weight-bold

font-bold

text-bold

9 / 20

What is the purpose of the `prose` plugin in Tailwind CSS?

To create a set of default UI components.

To create a responsive grid system.

To add typography styles to unstyled HTML, such as content from a CMS.

To add functionality for generating dynamic CSS.

10 / 20

Which utility class would you use to add a `display: flex;` property?

d-flex

display-flex

flexbox

flex

11 / 20

Which of the following classes centers an element horizontally using flexbox?

justify-center

center-x

align-center

flex-center

12 / 20

Which of the following classes would set the text color to a specific shade of blue?

font-blue-500

color-blue-500

text-blue-500

text-color-blue-500

13 / 20

What is the core philosophy of Tailwind CSS?

A utility-first approach, where you build designs directly in your HTML using single-purpose CSS classes.

Component-based styling, where you create reusable components with embedded styles.

A framework that provides a large number of pre-built, ready-to-use UI components

. A semantic naming convention for classes to describe the element's purpose.

14 / 20

Which utility class is used to add a shadow to an element?

box-shadow

shd

shadow

drop-shadow

15 / 20

What does the `md:` prefix signify in a Tailwind CSS class, like `md:w-1/2`?

It applies the style to medium-sized elements.

It applies the style only on mobile devices.

It stands for 'margin-default'.

It applies the style when the screen size is at the medium breakpoint and larger.

16 / 20

What is the primary benefit of Tailwind's Just-in-Time (JIT) engine?

It automatically organizes your utility classes into semantic components.

It generates CSS on-demand, only including the utility classes you actually use in your project.

It compiles CSS in a separate background thread to improve performance.

It generates a huge CSS file containing all possible utility classes upfront.

17 / 20

How do you make an element's background color change on hover?

hover(bg-blue-500)

hover-bg-blue-500

bg-blue-500:hover

hover:bg-blue-500

18 / 20

What is the correct way to set the `font-size` to `1.5rem` and `line-height` to `2rem` using a single Tailwind class?

text-lg leading-loose

text-[1.5rem]/[2rem]

font-size-1.5rem-line-height-2rem

text-2xl

19 / 20

How do you enable dark mode in Tailwind CSS?

By using the `@dark` directive in your CSS file.

You need to install a separate dark mode plugin.

By setting the `dark-mode` property in the `tailwind.config.js` file.

By adding `dark:` as a prefix to your utility classes.

20 / 20

How do you add a `2px` solid red border to an element using arbitrary values?

border-[2px] border-solid border-red-500

border-[2px_solid_red]

border-2px border-red-500

border-[2px] border-[red]

Your score is

Overview:

How well do you know Tailwind CSS? Take our Tailwind CSS Quiz to challenge yourself with questions on utility classes, responsive layouts, and modern styling techniques. A fun way to test and sharpen your frontend development skills!