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.

Practice

1. What is the main purpose of using presets in Tailwind CSS configuration?

easy

A. To create custom CSS animations

B. To share common Tailwind settings across multiple projects

C. To add new color palettes only for one project

D. To compile Tailwind CSS faster on a single project

Solution

1. Step 1: Understand the role of presets

   Presets are used to share configuration settings like colors, fonts, and plugins across projects.

2. Step 2: Compare options

   Options B, C, and D describe features unrelated to sharing configs across projects.

3. Final Answer:

   To share common Tailwind settings across multiple projects -> Option B

4. Quick Check:

   Presets = Shared config across projects [OK]

Hint: Presets = shared config for multiple projects [OK]

Common Mistakes:

• Thinking presets only add colors or animations
• Confusing presets with plugins
• Believing presets speed up compilation

2. Which of the following is the correct way to include a preset in tailwind.config.js?

easy

A. presets: require('tailwind-preset')

B. presets: ['tailwind-preset']

C. presets: [require('tailwind-preset')]

D. preset: [require('tailwind-preset')]

Solution

1. Step 1: Check the correct property name and syntax

   The property is presets (plural) and it expects an array of required modules.

2. Step 2: Validate each option

   presets: [require('tailwind-preset')] uses presets with an array containing require('tailwind-preset'), which is correct syntax.

3. Final Answer:

   presets: [require('tailwind-preset')] -> Option C

4. Quick Check:

   Presets property + array + require() = correct [OK]

Hint: Use presets as an array with require() inside [OK]

Common Mistakes:

• Using singular 'preset' instead of 'presets'
• Not wrapping require() inside an array
• Passing string instead of require()

3. Given this tailwind.config.js snippet, what will be the background color of a div with class bg-primary?

module.exports = {
  presets: [require('./shared-preset')],
  theme: {
    extend: {
      colors: {
        primary: '#ff0000'
      }
    }
  }
}

And the shared-preset.js contains:

module.exports = {
  theme: {
    colors: {
      primary: '#00ff00'
    }
  }
}

medium

A. #ff0000 (red) from local config

B. No color applied, class invalid

C. #00ff00 (green) from preset

D. Error due to conflicting colors

Solution

1. Step 1: Understand config merging order

   Local config overrides preset values when keys conflict, so local primary color '#ff0000' overrides preset '#00ff00'.

2. Step 2: Determine final color for bg-primary

   The div uses the local config color '#ff0000' (red).

3. Final Answer:

   #ff0000 (red) from local config -> Option A

4. Quick Check:

   Local config overrides preset colors [OK]

Hint: Local theme colors override preset colors [OK]

Common Mistakes:

• Assuming preset colors override local config
• Thinking conflicting keys cause errors
• Believing class won't apply without explicit import

4. You added a preset in tailwind.config.js but your styles from the preset are not applying. What is the most likely mistake?

medium

A. Using preset instead of presets in config

B. Forgetting to export the preset module with module.exports

C. Not installing Tailwind CSS in the project

D. Adding presets inside the theme object

Solution

1. Step 1: Check common config mistakes

   Using preset (singular) instead of presets (plural) means Tailwind ignores the preset array.

2. Step 2: Validate other options

   Forgetting to export the preset module with module.exports is possible but less common; C and D are unrelated to preset loading.

3. Final Answer:

   Using preset instead of presets in config -> Option A

4. Quick Check:

   Correct property name is 'presets' [OK]

Hint: Use 'presets' plural, not 'preset' singular [OK]

Common Mistakes:

• Misspelling 'presets' as 'preset'
• Placing presets inside wrong config section
• Not exporting preset module properly

5. You want to share a preset that includes custom fonts and colors across three projects. Which approach ensures all projects use the preset and can override colors if needed?

hard

A. Use Tailwind's CDN link with custom fonts and colors embedded

B. Copy the preset config file into each project and import it manually in CSS files

C. Write the preset config directly inside each project's tailwind.config.js without sharing

D. Create a separate npm package with the preset and add it in each project's presets array; override colors locally as needed

Solution

1. Step 1: Identify best sharing method

   Creating a separate npm package for the preset allows easy reuse and updates across projects.

2. Step 2: Confirm override capability

   Adding the preset in presets array lets each project override colors locally without changing the shared preset.

3. Final Answer:

   Create a separate npm package with the preset and add it in each project's presets array; override colors locally as needed -> Option D

4. Quick Check:

   npm package + presets array + local overrides = best practice [OK]

Hint: Use npm package for preset + local overrides [OK]

Common Mistakes:

• Copying preset files manually causing duplication
• Embedding config directly without sharing
• Using CDN which can't share config presets