Tailwind Mastery: Challenging Tailwind CSS Interview Questions — Questions & Answers

This quiz contains 10 questions. Below is a complete reference of all questions, answer choices, and correct answers. You can use this section to review after taking the interactive quiz above.

1. Question 1: Understanding Utility-First

   Which principle best describes the utility-first approach used by Tailwind CSS, as opposed to conventional CSS methodologies?

   • A. Writing large CSS files with component classes
   • B. Using small, single-purpose classes to construct UI directly in HTML
   • C. Emphasizing inheritance over composition
   • D. Adopting global CSS resets by default
   • E. Relying on pre-built user interface components exclusively
   Show correct answer

   Correct answer: B. Using small, single-purpose classes to construct UI directly in HTML

2. Question 2: Config Customization

   In the Tailwind CSS config file, which key would you update to add a custom background color called 'brand-blue'?

   • A. variants.extend.backgroundColor
   • B. plugins.colors
   • C. theme.extend.backgroundColor
   • D. purge.backgroundColor
   • E. theme.custom.background
   Show correct answer

   Correct answer: C. theme.extend.backgroundColor

3. Question 3: Purging Unused CSS

   What is the main function of the 'purge' option in tailwind.config.js?

   • A. To minify all JavaScript files in production
   • B. To remove unused CSS utilities from the final build
   • C. To reset all browser default styles
   • D. To generate custom utility classes
   • E. To load external CSS frameworks
   Show correct answer

   Correct answer: B. To remove unused CSS utilities from the final build

4. Question 4: Variants in Practice

   When customizing variants in the Tailwind config file, which scenario best illustrates their purpose?

   • A. Adding new fonts to the default theme
   • B. Allowing a utility class to respond to 'focus' and 'hover' states
   • C. Creating nested CSS classes for child selectors
   • D. Adding a new color palette
   • E. Compiling Sass files automatically
   Show correct answer

   Correct answer: B. Allowing a utility class to respond to 'focus' and 'hover' states

5. Question 5: Using @apply

   Given a custom CSS class '.btn-primary' that should include Tailwind's 'bg-blue-500' and 'text-white', which feature allows this composition?

   • A. @add
   • B. @apply
   • C. @compose
   • D. @import
   • E. @include
   Show correct answer

   Correct answer: B. @apply

6. Question 6: Plugin Extension

   Suppose you want to add custom utilities globally to your Tailwind project. Where should you register a third-party plugin?

   • A. In the variants section
   • B. Within the extend object under theme
   • C. In the plugins array of tailwind.config.js
   • D. In the purge section
   • E. As a direct import in main.js
   Show correct answer

   Correct answer: C. In the plugins array of tailwind.config.js

7. Question 7: Theme Extension

   What is the recommended way to add new spacing values to Tailwind's spacing scale without overwriting the defaults?

   • A. Modify the theme.spacing object directly
   • B. Add new values under theme.extend.spacing
   • C. Insert values in variants.spacing
   • D. Place values in plugins.spacing
   • E. Update purge.spacing with new values
   Show correct answer

   Correct answer: B. Add new values under theme.extend.spacing

8. Question 8: Responsive Design

   How does Tailwind CSS enable you to apply different styles at various screen sizes in your HTML code?

   • A. Using @media queries inside custom CSS files
   • B. By adding responsive prefixes like 'md:' to utility classes
   • C. Defining breakpoints in the purge section
   • D. Using only JavaScript to modify classes on resize
   • E. Setting .responsive attribute on HTML elements
   Show correct answer

   Correct answer: B. By adding responsive prefixes like 'md:' to utility classes

9. Question 9: Custom Fonts

   If you want to add a new font family called 'Headline' to your Tailwind project, which config structure is correct?

   • A. theme.extend.fonts.Headline = 'Helvetica, Arial'
   • B. theme.fontFamily = ['Headline', 'serif']
   • C. theme.extend.fontFamily['headline'] = ['Headline', 'sans-serif']
   • D. theme.fontFamily.headline = ['Headline', 'sans-serif']
   • E. extend.theme.fontFamily['headline'] = ['Headline', 'sans-serif']
   Show correct answer

   Correct answer: C. theme.extend.fontFamily['headline'] = ['Headline', 'sans-serif']

10. Question 10: Building Custom Utilities

    Which approach lets you define a custom utility class that utilizes multiple Tailwind classes (e.g., combining 'uppercase', 'p-4', and 'tracking-wide')?

    • A. Use @import followed by the classes
    • B. Define the class in your CSS and use the @apply directive with those utilities
    • C. Combine the classes in tailwind.config.js under theme.utilities
    • D. List the utilities under variants in tailwind.config.js
    • E. Register the class in the plugins array only
    Show correct answer

    Correct answer: B. Define the class in your CSS and use the @apply directive with those utilities