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.

Practice

1. What is the main purpose of using addUtilities in Tailwind CSS?

easy

A. To create custom CSS classes that can be reused in your HTML

B. To remove unused Tailwind CSS classes from the build

C. To automatically generate responsive breakpoints

D. To add JavaScript functionality to Tailwind components

Solution

1. Step 1: Understand the role of addUtilities

   addUtilities is used to define new CSS classes with custom styles that Tailwind does not provide by default.

2. Step 2: Compare with other options

   Options A, B, and D describe other Tailwind or unrelated features, not the purpose of addUtilities.

3. Final Answer:

   To create custom CSS classes that can be reused in your HTML -> Option A

4. Quick Check:

   addUtilities = create reusable custom classes [OK]

Hint: Remember: addUtilities adds new CSS classes [OK]

Common Mistakes:

• Confusing addUtilities with purge or remove features
• Thinking addUtilities adds JavaScript code
• Assuming it auto-generates responsive breakpoints

2. Which of the following is the correct syntax to add a custom utility class .text-shadow with text-shadow: 2px 2px #000; using addUtilities?

easy

A. addUtilities('.text-shadow { text-shadow: 2px 2px #000; }')

B. addUtilities({ '.text-shadow': { 'text-shadow': '2px 2px #000' } })

C. addUtilities({ textShadow: '2px 2px #000' })

D. addUtilities({ '.text-shadow': 'text-shadow: 2px 2px #000;' })

Solution

1. Step 1: Check the object format for addUtilities

   addUtilities expects an object where keys are class selectors and values are objects of CSS properties.

2. Step 2: Validate each option

   addUtilities({ '.text-shadow': { 'text-shadow': '2px 2px #000' } }) correctly uses an object with selector key and CSS property object value. Options B and D use incorrect formats (string or wrong value type). addUtilities({ textShadow: '2px 2px #000' }) misses the selector key.

3. Final Answer:

   addUtilities({ '.text-shadow': { 'text-shadow': '2px 2px #000' } }) -> Option B

4. Quick Check:

   addUtilities needs selector: CSS object [OK]

Hint: Use object with selector keys and CSS property objects [OK]

Common Mistakes:

• Passing CSS as a string instead of an object
• Omitting the selector key for the utility
• Using camelCase for CSS properties instead of kebab-case

3. Given this Tailwind plugin code snippet, what CSS class will be generated?

addUtilities({
  '.custom-border': {
    'border-width': '3px',
    'border-color': '#f00'
  }
})

medium

A. A class named .border-custom with 3px red border

B. A class named .custom-border with 1px black border

C. A class named .custom-border with 3px red border

D. No class will be generated due to syntax error

Solution

1. Step 1: Identify the class name and CSS properties

   The key '.custom-border' defines the class name. The CSS properties set border width to 3px and border color to red (#f00).

2. Step 2: Confirm no syntax errors

   The object syntax is correct, so the class will be generated as described.

3. Final Answer:

   A class named .custom-border with 3px red border -> Option C

4. Quick Check:

   Selector and CSS properties match output class [OK]

Hint: Class name is the object key, CSS inside is the style [OK]

Common Mistakes:

• Confusing class name with CSS property names
• Assuming default border width or color
• Thinking syntax error prevents generation

4. Identify the error in this Tailwind plugin code that tries to add a .bg-gradient utility:

addUtilities({
  '.bg-gradient': 'background: linear-gradient(to right, #000, #fff);'
})

medium

A. Missing semicolon after addUtilities call

B. Class selector should not start with a dot

C. The property name 'background' is invalid in Tailwind

D. CSS properties must be inside an object, not a string

Solution

1. Step 1: Check the value type for the class key

   The value for '.bg-gradient' must be an object with CSS properties, not a string.

2. Step 2: Validate other options

   Class selectors should start with a dot (correct here). 'background' is a valid CSS property. Semicolon after function call is optional in JavaScript.

3. Final Answer:

   CSS properties must be inside an object, not a string -> Option D

4. Quick Check:

   CSS properties need object format [OK]

Hint: Use object for CSS properties, not string [OK]

Common Mistakes:

• Passing CSS as a string instead of an object
• Removing the dot from class selector
• Thinking semicolon is mandatory after addUtilities

5. You want to create a custom utility .hover-scale that scales an element to 1.1 times its size on hover using addUtilities. Which is the correct way to add this utility with hover variant support?

hard

A. addUtilities({ '.hover-scale': { transform: 'scale(1.1)' } }, { variants: ['hover'] })

B. addUtilities({ '.hover-scale:hover': { transform: 'scale(1.1)' } })

C. addUtilities({ '.hover-scale': { ':hover': { transform: 'scale(1.1)' } } })

D. addUtilities({ '.hover-scale': { transform: 'scale(1.1)' } }, { variants: ['responsive'] })

Solution

1. Step 1: Understand how to add variants with addUtilities

   Variants like 'hover' are added as a second argument object with a variants array.

2. Step 2: Check each option's approach

   addUtilities({ '.hover-scale': { transform: 'scale(1.1)' } }, { variants: ['hover'] }) correctly adds the utility and enables hover variant. addUtilities({ '.hover-scale:hover': { transform: 'scale(1.1)' } }) incorrectly tries to put :hover in the selector key. addUtilities({ '.hover-scale': { ':hover': { transform: 'scale(1.1)' } } }) nests :hover inside CSS object, which is invalid. addUtilities({ '.hover-scale': { transform: 'scale(1.1)' } }, { variants: ['responsive'] }) uses 'responsive' variant, not hover.

3. Final Answer:

   addUtilities({ '.hover-scale': { transform: 'scale(1.1)' } }, { variants: ['hover'] }) -> Option A

4. Quick Check:

   Variants go in second argument as array [OK]

Hint: Add variants as second argument with variants array [OK]

Common Mistakes:

• Putting :hover inside selector string
• Nesting :hover inside CSS object
• Using wrong variant name like 'responsive' instead of 'hover'