Creating custom utilities with addUtilities in Tailwind - Quick Revision & Summary

Recall & Review

beginner

What is the purpose of addUtilities in Tailwind CSS?

addUtilities lets you create your own custom CSS utility classes that work like Tailwind's built-in classes.

beginner

How do you define a simple custom utility for text-shadow using addUtilities?

<p>You create an object with the class name as key and CSS properties as value, then pass it to <code>addUtilities</code>.</p><pre>addUtilities({ '.text-shadow': { 'text-shadow': '2px 2px #000' } })</pre>

intermediate

Why should you include variants like hover or focus when adding utilities?

<p>Variants let your custom utilities respond to states like hover or focus, making your styles interactive and accessible.</p>

intermediate

Where do you place the addUtilities call in a Tailwind plugin?

Inside the plugin function, which Tailwind calls during build. You receive addUtilities as an argument to add your custom classes.

beginner

What is the benefit of using addUtilities over writing plain CSS?

It integrates your custom utilities into Tailwind's system, so you get consistent naming, responsive variants, and easy use in your HTML.

What argument does addUtilities expect?

A A string of CSS code

B A number representing pixel size

C An array of HTML elements

D An object with class names as keys and CSS properties as values

addUtilities expects an object where keys are class names and values are CSS property objects.

How do you add hover variants to your custom utilities?

A Pass a second argument with variants like <code>{ variants: ['hover'] }</code>

B Write <code>:hover</code> in the class name

C Use <code>addHoverUtilities</code> instead

D Hover variants are automatic and need no setup

You add variants by passing a second argument to addUtilities specifying which variants to generate.

Where do you write the code that calls addUtilities?

A Inside a Tailwind CSS plugin function

B In your HTML file

C In a JavaScript event listener

D In a CSS file

Custom utilities are added inside a Tailwind plugin function during the build process.

What is a benefit of using addUtilities for custom styles?

A They replace all default Tailwind utilities

B They integrate with Tailwind's responsive and state variants

C They automatically minify your CSS

D They only work in development mode

Custom utilities added with addUtilities can use Tailwind's variants like responsive and hover.

Which of these is a valid custom utility class using addUtilities?

A [ '.bg-stripes', { 'background-image': 'stripes' } ]

B { 'bg-stripes': 'background-image: stripes;' }

C { '.bg-stripes': { 'background-image': 'repeating-linear-gradient(45deg, #ccc, #ccc 10px, #fff 10px, #fff 20px)' } }

D '.bg-stripes { background-image: stripes; }'

The correct format is an object with class names as keys and CSS property objects as values.

Explain how to create a custom utility class in Tailwind CSS using addUtilities.

Think about how Tailwind builds its classes and how you can add your own.

Why is it useful to add variants when creating custom utilities with addUtilities?

Consider how users interact with elements on different devices and states.