Creating custom utilities with addUtilities in Tailwind - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the function needed to add custom utilities in Tailwind CSS.

Tailwind

const plugin = require('[1]');

Drag options to blanks, or click blank then click option'

Atailwindcss/utilities

Btailwindcss/plugin

Ctailwindcss/custom

Dtailwindcss/addUtilities

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect import paths like 'tailwindcss/utilities'.

Forgetting to import the plugin function.

You need to import plugin from tailwindcss/plugin to create custom utilities.

2fill in blank

medium

Complete the code to define a new utility class for a red background using addUtilities.

Tailwind

module.exports = plugin(function({ addUtilities }) {
  addUtilities({
    '.bg-red-custom': { backgroundColor: '[1]' }
  });
});

Drag options to blanks, or click blank then click option'

A#00ff00

B#0000ff

C#ff0000

D#ffff00

Attempts:

3 left

💡 Hint

Common Mistakes

Using green or blue hex codes instead of red.

Forgetting the '#' in the color code.

The color code #ff0000 represents red, so it sets the background color to red.

3fill in blank

hard

Fix the error in the code to correctly add a utility for text shadow.

Tailwind

module.exports = plugin(function({ addUtilities }) {
  addUtilities({
    '.text-shadow': { textShadow: [1] }
  });
});

Drag options to blanks, or click blank then click option'

A'2px 2px #000000'

B2px 2px #000000

C"2px 2px #000000"

D2px, 2px, #000000

Attempts:

3 left

💡 Hint

Common Mistakes

Not wrapping the value in quotes causing syntax errors.

Using commas instead of spaces in the value.

The value for textShadow must be a string wrapped in quotes. Single quotes or double quotes work, but the code uses single quotes here.

4fill in blank

hard

Fill both blanks to add utilities for a blue border and a green text color.

Tailwind

module.exports = plugin(function({ addUtilities }) {
  addUtilities({
    '.border-blue': { borderColor: '[1]' },
    '.text-green': { color: '[2]' }
  });
});

Drag options to blanks, or click blank then click option'

A#0000ff

B#00ff00

C#ff0000

D#ffff00

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the color codes for border and text.

Using red or yellow codes instead of blue and green.

#0000ff is blue for the border color, and #00ff00 is green for the text color.

5fill in blank

hard

Fill all three blanks to add utilities for padding, margin, and a custom font size.

Tailwind

module.exports = plugin(function({ addUtilities }) {
  addUtilities({
    '.p-10': { padding: '[1]' },
    '.m-5': { margin: '[2]' },
    '.text-xxl': { fontSize: '[3]' }
  });
});

Drag options to blanks, or click blank then click option'

A2.5rem

B1.25rem

C3rem

D5rem

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up rem values for padding and margin.

Using too small or too large font size values.

Padding .p-10 uses 2.5rem, margin .m-5 uses 1.25rem, and font size .text-xxl uses 3rem.