Preset sharing across projects in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How to share Tailwind presets across multiple projects?

You want to reuse a Tailwind CSS preset configuration in several projects. Which approach correctly shares the preset without duplicating code?

A Copy the preset config file manually into each project folder.

B Publish the preset as an npm package and install it in each project.

C Use a CDN link to load the preset CSS directly in each project.

D Write the preset styles inline in each HTML file.

💡 Hint

Think about how code reuse and version control work best in JavaScript projects.

Publishing the preset as an npm package allows you to maintain one source of truth. Each project can install and update the preset easily. Copying files manually or using CDN links does not provide easy updates or version control.

📝 Syntax

intermediate

Correct syntax to extend Tailwind config with a shared preset

Given a shared preset package named @myorg/tailwind-preset, which tailwind.config.js snippet correctly extends it?

Tailwind

module.exports = {
  presets: [/* ??? */],
  theme: {
    extend: {
      colors: {
        primary: '#123456'
      }
    }
  }
}

A presets: require('@myorg/tailwind-preset'),

B presets: ['@myorg/tailwind-preset'],

C presets: [import '@myorg/tailwind-preset'],

D presets: [require('@myorg/tailwind-preset')],

💡 Hint

Remember how Node.js requires modules in config files.

The presets array expects the preset module to be imported using require(). Option D correctly wraps the preset in an array and uses require().

❓ rendering

advanced

What is the visual result of using a shared preset with extended colors?

You have a shared preset that defines colors: { brand: '#ff0000' }. Your project extends it with colors: { brand: '#00ff00' }. What color will the class text-brand apply?

A Green (#00ff00) from the project extension

B Red (#ff0000) from the preset

C No color applied, class is undefined

D Both colors applied, resulting in a gradient

💡 Hint

Think about how Tailwind merges theme extensions.

Tailwind merges the theme.extend object with the preset. The project’s extension overrides the preset’s color for the same key. So text-brand uses green (#00ff00).

❓ selector

advanced

How to customize Tailwind variants in a shared preset?

You want your shared preset to add a custom variant group-hover for a utility. Which snippet correctly adds this variant inside the preset's tailwind.config.js?

Tailwind

module.exports = {
  variants: {
    extend: {
      backgroundColor: [/* ??? */]
    }
  }
}

A backgroundColor: ['active'],

B backgroundColor: 'group-hover',

C backgroundColor: ['group-hover'],

D backgroundColor: ['hover', 'focus'],

💡 Hint

Variants are arrays of strings representing states.

Variants must be arrays. Adding 'group-hover' inside the array extends the backgroundColor utilities to respond to group hover state.

❓ accessibility

expert

Ensuring accessible focus styles with shared Tailwind presets

Your shared preset removes default focus outlines for buttons but you want to keep accessible focus indicators in all projects. What is the best way to handle focus styles in the preset?

A Define custom focus-visible styles using Tailwind’s <code>focus-visible</code> variant in the preset.

B Remove all focus styles in the preset and rely on browser defaults.

C Use <code>outline-none</code> globally in the preset to remove outlines everywhere.

D Add JavaScript to simulate focus outlines instead of CSS.

💡 Hint

Accessible focus means visible outlines only when keyboard users focus elements.

Using focus-visible variant allows showing focus outlines only when keyboard navigation is used, improving accessibility. Removing outlines globally or relying on JS is not recommended.