Creating custom utilities with addUtilities in Tailwind - Practice Exercises

Challenge - 5 Problems

📝 Syntax

intermediate

What is the correct syntax to add a custom utility for a 3rem margin using addUtilities?

You want to create a custom utility class .m-12 that applies margin: 3rem;. Which option correctly uses addUtilities in your Tailwind plugin?

A addUtilities({ '.m-12': margin: '3rem' })

B addUtilities({ '.m-12': { margin: 3rem } })

C addUtilities({ '.m-12': { margin: '3rem' } })

D addUtilities('.m-12 { margin: 3rem; }')

💡 Hint

Remember that CSS property values must be strings in JavaScript objects.

The addUtilities function expects an object where keys are selectors and values are objects of CSS properties with string values. Option C correctly uses this format. Option C misses quotes around '3rem', causing a syntax error. Option C has incorrect object syntax. Option C passes a string instead of an object.

❓ rendering

intermediate

Which custom utility class will apply a blue background color correctly?

You add this utility in your Tailwind plugin:

addUtilities({ '.bg-custom-blue': { 'background-color': '#1e40af' } })

Which HTML snippet will show a blue background when using this utility?

A <div class="bg-custom-blue">Hello</div>

B <div class="bg_custom_blue">Hello</div>

C <div class="bg-custom-blue" style="background-color: red;">Hello</div>

D <div class="bg-custom-blue"></div>

💡 Hint

Class names must match exactly and inline styles override classes.

Option A uses the correct class name and will show a blue background. Option A uses underscores instead of dashes, so no style applies. Option A overrides the background color with inline red, so it won't be blue. Option A has the class but no content, so background is applied but not visible with no size.

❓ selector

advanced

Which selector correctly targets hover state in addUtilities?

You want to create a utility .text-hover-red that changes text color to red on hover. Which option correctly defines this in addUtilities?

A addUtilities({ '.text-hover-red': { '&:hover': { color: 'red' } } })

B addUtilities({ '.text-hover-red': { ':hover': { color: 'red' } } })

C addUtilities({ '.text-hover-red:hover': { ':color': 'red' } })

D addUtilities({ '.text-hover-red:hover': { color: 'red' } })

💡 Hint

Pseudo-classes like :hover go directly in the selector string.

Option D correctly uses the selector '.text-hover-red:hover' with the hover pseudo-class. Option D tries to nest ':hover' inside the style object, which is invalid. Option D uses ':color' which is not a valid CSS property. Option D uses '&:hover' which is a syntax used in preprocessors like Sass but not valid here.

❓ layout

advanced

How to create a custom utility for a flex container with centered items?

You want a utility class .flex-center that applies display: flex;, justify-content: center;, and align-items: center;. Which option correctly adds this utility?

A addUtilities({ '.flex-center': { display: 'flex', 'justify-content': 'center', 'align-items': 'center' } })

B addUtilities({ '.flex-center': { display: 'flex', justify-content: center, align-items: center } })

C addUtilities({ '.flex-center': { display: flex, justify-content: center, align-items: center } })

D addUtilities({ '.flex-center': { display: 'flex', justifyContent: 'center', alignItems: 'center' } })

💡 Hint

CSS properties with hyphens must be quoted in JavaScript objects.

Option A correctly quotes the CSS properties with hyphens and uses string values. Option A uses camelCase properties which Tailwind's addUtilities does not support. Options B and C miss quotes around values or properties causing syntax errors.

❓ accessibility

expert

Which custom utility correctly adds focus-visible outline for accessibility?

You want a utility .focus-outline that adds a visible outline only when the element is focused via keyboard (using :focus-visible). Which option correctly defines this in addUtilities?

A addUtilities({ '.focus-outline:focus': { outline: '2px solid #2563eb', outlineOffset: '2px' } })

B addUtilities({ '.focus-outline:focus-visible': { outline: '2px solid #2563eb', outlineOffset: '2px' } })

C addUtilities({ '.focus-outline': { ':focus-visible': { outline: '2px solid #2563eb', outlineOffset: '2px' } } })

D addUtilities({ '.focus-outline': { outline: '2px solid #2563eb', outlineOffset: '2px' } })

💡 Hint

Use the :focus-visible pseudo-class in the selector string to target keyboard focus.

Option B correctly uses the selector '.focus-outline:focus-visible' to apply the outline only when focused via keyboard. Option B tries to nest ':focus-visible' inside the style object, which is invalid. Option B uses ':focus' which applies on all focus, not just keyboard. Option B applies outline always, not only on focus.