Plugin system overview in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a plugin in Tailwind CSS configuration.

Tailwind

module.exports = {
  plugins: [[1]],
};

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

Aplugin('@tailwindcss/forms')

Brequire('@tailwindcss/forms')()

Cplugins.require('@tailwindcss/forms')

Drequire('@tailwindcss/forms')

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses after require which may cause errors.

Using incorrect syntax like 'plugin()' instead of 'require()'.

In Tailwind CSS, plugins are added by requiring them without calling as a function unless specified. So require('@tailwindcss/forms') is correct.

2fill in blank

medium

Complete the code to define a custom plugin using Tailwind's plugin function.

Tailwind

const plugin = require('tailwindcss/plugin');

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

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

A'2px 2px #000000'

B2px 2px 5px #000000

C'2px 2px 5px #000000'

D'2px 2px 5px'

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the blur radius or color.

Not wrapping the value in quotes.

The textShadow CSS property requires a string with offsets and blur radius plus color, like '2px 2px 5px #000000'.

3fill in blank

hard

Fix the error in the plugin code to correctly add a new utility class.

Tailwind

const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.rotate-15': {
          transform: 'rotate([1]deg)'
        }
      })
    })
  ]
};

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

A15deg

B15

C'15'

D'15deg'

Attempts:

3 left

💡 Hint

Common Mistakes

Adding quotes around the number causing double quotes in CSS.

Including 'deg' twice.

The value inside the string should be a number without quotes because the whole value is already a string with 'deg' unit appended.

4fill in blank

hard

Fill both blanks to create a plugin that adds a new color utility and uses the theme function.

Tailwind

const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addUtilities, [1] }) {
      const newColors = {
        '.text-brand': {
          color: [2]('colors.blue.500')
        }
      };
      addUtilities(newColors);
    })
  ]
};

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

Atheme

Bconfig

DaddBase

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'config' instead of 'theme' to access colors.

Not destructuring 'theme' from the plugin function argument.

The theme function is used to access Tailwind's design tokens like colors inside plugins.

5fill in blank

hard

Fill all three blanks to create a plugin that adds a responsive utility with variants.

Tailwind

const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addUtilities, [1], e }) {
      const utilities = {
        [`.${e('skew-10')}`]: {
          transform: '[2](10deg)'
        }
      };
      addUtilities(utilities, [3]);
    })
  ]
};

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

AaddVariants

BaddUtilities

C{ variants: ['responsive'] }

Dskew

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'addVariants' instead of 'addUtilities'.

Forgetting to pass variants object.

Using incorrect transform function name.

addUtilities is destructured to add utilities, skew is the CSS transform function, and the third argument specifies the variants like { variants: ['responsive'] }.