Component library patterns (Headless UI) in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the main advantage of using Headless UI components?

Headless UI components provide unstyled, accessible UI primitives. What is the biggest benefit of this approach?

A They restrict customization to maintain uniform design.

B They come with built-in styles that cannot be changed.

C They allow developers to fully control styling while ensuring accessibility.

D They automatically generate CSS styles for you.

💡 Hint

Think about how Headless UI separates logic from style.

Headless UI components provide the logic and accessibility features but leave styling entirely to the developer, allowing full design control.

📝 Syntax

intermediate

Which Tailwind class correctly applies a responsive grid layout?

You want a grid with 1 column on small screens and 3 columns on medium and larger screens. Which class string achieves this?

A grid-cols-1 grid md:grid-cols-3 gap-4

B grid grid-cols-1 md:grid-cols-3 gap-4

C grid grid-cols-3 md:grid-cols-1 gap-4

D grid-cols-3 grid grid-cols-1 md:gap-4

💡 Hint

Remember Tailwind uses mobile-first approach and responsive prefixes like md:

The class 'grid grid-cols-1 md:grid-cols-3 gap-4' sets 1 column by default and 3 columns on medium screens and up.

❓ rendering

advanced

What will be the visible result of this Headless UI Menu component snippet?

Consider this React code using Headless UI Menu and Tailwind CSS:

import { Menu } from '@headlessui/react';

export default function Example() {
  return (
    
      Options
      
        
          {({ active }) => (
            Account
          )}
        
        
          {({ active }) => (
            Settings
          )}
        
      
    
  );
}

A Two buttons labeled 'Account' and 'Settings' always visible below a gray 'Options' label.

B A blue button labeled 'Options' with no dropdown menu visible or interactive.

C A white button labeled 'Options' that shows a blue dropdown with two links in gray text.

D A blue button labeled 'Options' that toggles a white dropdown with two links: 'Account' and 'Settings'. Hovering a link highlights it blue with white text.

💡 Hint

Headless UI Menu.Button toggles Menu.Items visibility with styling applied.

The Menu.Button is styled blue with white text. Clicking it toggles the Menu.Items dropdown with white background and border. Each Menu.Item link changes background and text color on hover (active).

❓ selector

advanced

Which Tailwind selector targets only the focused state of a Headless UI button?

You want to style a Headless UI button only when it is focused (keyboard or programmatically). Which Tailwind class applies this style correctly?

A focus:outline-none focus:ring-2 focus:ring-blue-500

B hover:outline-none hover:ring-2 hover:ring-blue-500

C active:outline-none active:ring-2 active:ring-blue-500

D visited:outline-none visited:ring-2 visited:ring-blue-500

💡 Hint

Focus styles apply when the element is focused, not hovered or active.

The 'focus:' prefix applies styles only when the element is focused. Other prefixes like 'hover:', 'active:', and 'visited:' apply in different states.

❓ accessibility

expert

What ARIA role does Headless UI assign to its Dialog component by default?

Headless UI Dialog component manages accessibility automatically. Which ARIA role is assigned to the main dialog container?

A dialog

B alertdialog

C region

D complementary

💡 Hint

Dialogs usually have a specific ARIA role to identify them as modal windows.

Headless UI Dialog uses role="dialog" by default to identify the container as a dialog window for assistive technologies.