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'] }.

Practice

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

easy

A. To remove unused CSS from the project

B. To replace the default Tailwind CSS styles completely

C. To compile Tailwind CSS into JavaScript

D. To add new styles or features to Tailwind CSS

Solution

1. Step 1: Understand what plugins do in Tailwind CSS

   Plugins extend Tailwind by adding new styles or features beyond the default set.

2. Step 2: Compare options to the purpose of plugins

   Only To add new styles or features to Tailwind CSS correctly states that plugins add new styles or features.

3. Final Answer:

   To add new styles or features to Tailwind CSS -> Option D

4. Quick Check:

   Plugins extend Tailwind = C [OK]

Hint: Plugins extend Tailwind with new styles or features [OK]

Common Mistakes:

• Thinking plugins replace all default styles
• Confusing plugins with CSS purging tools
• Believing plugins compile CSS into JS

2. Which of the following is the correct way to create a Tailwind CSS plugin?

easy

A. plugin(() => { /* plugin code */ })

B. createPlugin(() => { /* plugin code */ })

C. new Plugin(() => { /* plugin code */ })

D. tailwindPlugin(() => { /* plugin code */ })

Solution

1. Step 1: Recall the Tailwind plugin creation function

   The official function to create plugins is plugin().

2. Step 2: Match the correct syntax

   Only plugin(() => { /* plugin code */ }) uses plugin() correctly with a function argument.

3. Final Answer:

   plugin(() => { /* plugin code */ }) -> Option A

4. Quick Check:

   Use plugin() function = B [OK]

Hint: Remember the function name is exactly plugin() [OK]

Common Mistakes:

• Using createPlugin instead of plugin
• Trying to instantiate Plugin with new keyword
• Using incorrect function names like tailwindPlugin

3. Given this plugin code snippet, what will it add to Tailwind CSS?

const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ addUtilities }) {
  addUtilities({
    '.text-shadow': {
      'text-shadow': '2px 2px #ff0000'
    }
  })
})

medium

A. Removes the text shadow from all elements

B. A new component named text-shadow for buttons

C. A new utility class .text-shadow that adds a red shadow to text

D. Overrides the default text color to red

Solution

1. Step 1: Analyze the plugin function

   The plugin uses addUtilities to add a new CSS utility class.

2. Step 2: Understand the utility added

   The class .text-shadow applies a red text shadow style.

3. Final Answer:

   A new utility class .text-shadow that adds a red shadow to text -> Option C

4. Quick Check:

   addUtilities adds new CSS classes = D [OK]

Hint: Look for addUtilities to find new CSS classes added [OK]

Common Mistakes:

• Confusing utilities with components
• Thinking it changes default colors
• Assuming it removes styles instead of adding

4. Identify the error in this Tailwind plugin code:

const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ addComponents }) {
  addComponents({
    '.btn': {
      padding: '1rem',
      backgroundColor: 'blue'
    }
  })
})

medium

A. Missing semicolon after padding value

B. Property name should be background-color instead of backgroundColor

C. Function should use addUtilities instead of addComponents

D. Plugin must return a value

Solution

1. Step 1: Check CSS property names in JS object

   Tailwind plugin expects CSS properties in kebab-case strings, not camelCase.

2. Step 2: Identify the incorrect property

   backgroundColor should be background-color as a string key.

3. Final Answer:

   Property name should be background-color instead of backgroundColor -> Option B

4. Quick Check:

   CSS keys in plugins use kebab-case strings = A [OK]

Hint: Use kebab-case CSS property names in plugin objects [OK]

Common Mistakes:

• Using camelCase CSS property names
• Thinking semicolons are required in JS objects
• Confusing addComponents with addUtilities

5. You want to create a Tailwind plugin that adds a new utility class .card-shadow with a subtle box shadow, but only when the screen width is at least 768px. Which approach correctly uses the plugin system to achieve this?

hard

A. Use addUtilities with a media query inside the CSS object for .card-shadow

B. Use addComponents without media queries, then rely on user CSS for responsiveness

C. Add the utility class directly in Tailwind config's extend without a plugin

D. Use addUtilities but media queries are not supported in plugins

Solution

1. Step 1: Understand how to add responsive utilities in plugins

   Plugins can add utilities with media queries by nesting CSS inside the utility object.

2. Step 2: Identify the correct method

   Using addUtilities with a media query inside the CSS object is the correct way.

3. Final Answer:

   Use addUtilities with a media query inside the CSS object for .card-shadow -> Option A

4. Quick Check:

   Media queries inside addUtilities work = A [OK]

Hint: Nest media queries inside addUtilities CSS objects [OK]

Common Mistakes:

• Thinking media queries can't be used in plugins
• Using addComponents without media queries for utilities
• Trying to add utilities only via config extend