Plugin system overview in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does Tailwind CSS plugin system extend functionality?

Which statement best describes how Tailwind CSS plugins add new utilities or components?

A Plugins only change the browser's default styles without generating CSS.

B Plugins modify HTML files directly to add new classes before CSS is generated.

C Plugins replace the entire Tailwind CSS core with custom styles.

D Plugins add new CSS rules by injecting them during the build process using JavaScript functions.

💡 Hint

Think about how Tailwind generates CSS from JavaScript configuration.

Tailwind plugins are JavaScript functions that add new CSS utilities or components by injecting CSS rules during the build step. They do not modify HTML or replace core styles.

📝 Syntax

intermediate

Identify the correct plugin registration syntax

Which option shows the correct way to register a simple Tailwind CSS plugin that adds a '.btn' class?

Tailwind

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

module.exports = {
  plugins: [
    /* Your plugin here */
  ]
}

A plugin(function({ addComponents }) { addComponents({ '.btn': { padding: '1rem' } }) })

B plugin(addComponents => { '.btn': { padding: '1rem' } })

C plugin({ addComponents: { '.btn': { padding: '1rem' } } })

D plugin(function(addComponents) { addComponents('.btn', { padding: '1rem' }) })

💡 Hint

Look for the function signature and how addComponents is called.

The plugin function takes a callback with an object parameter. The addComponents method is called with an object defining the new CSS classes.

❓ rendering

advanced

What CSS output does this plugin generate?

Given this Tailwind plugin code, what CSS will be generated for the '.card' class?

Tailwind

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

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      addComponents({
        '.card': {
          padding: '2rem',
          borderRadius: '0.5rem',
          boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
        }
      })
    })
  ]
}

A .card { padding: 1rem; border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

B .card { padding: 2rem; border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

C .card { padding: 2rem; border-radius: 1rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

D .card { padding: 2rem; border-radius: 0.5rem; box-shadow: none; }

💡 Hint

Check the exact property values in the plugin code.

The plugin adds a '.card' class with padding 2rem, border-radius 0.5rem, and the specified box-shadow exactly as coded.

❓ selector

advanced

Which selector does this plugin add?

A Tailwind plugin adds this component: addComponents({ '.alert-warning': { backgroundColor: '#fef3c7', color: '#92400e' } }) Which CSS selector will be available in your project?

A .alert_warning

B alert-warning

C .alert-warning

D #alert-warning

💡 Hint

Look at how the class name is written in the plugin code.

The plugin adds a CSS class selector '.alert-warning' exactly as specified, with a dot prefix and hyphen in the name.

❓ accessibility

expert

How to ensure accessibility in a Tailwind plugin component?

You create a Tailwind plugin that adds a modal component with a '.modal' class. Which practice best improves accessibility for keyboard users?

A Add focus-visible styles and ensure the modal traps keyboard focus when open.

B Only add background color and ignore focus styles because CSS handles accessibility automatically.

C Use JavaScript to disable keyboard navigation while the modal is open without styling focus.

D Add a hover effect only, since keyboard users do not use hover.

💡 Hint

Think about how keyboard users interact with modals and focus.

Accessible modals must trap keyboard focus inside and show visible focus styles (like focus-visible) so keyboard users can navigate easily.