Ace Your Interview: Challenging Tailwind CSS Questions for Freshers Quiz

1. Understanding Tailwind's Customization

   Which of the following best explains how to add a new custom color called 'brand-blue' to the Tailwind palette for use as a text color in your project?

   1. A. Add 'brand-blue' to the theme.colors in tailwind.config.js and use it with classes like text-brand-blue
   2. B. Insert 'brand-blue' directly in your HTML using the style attribute
   3. C. Modify the main.css file to define a .brand-blue class and use text-purple
   4. D. Customize the core.css file and reference text-blue
   5. E. Change the HTML u003Cbodyu003E tag to have color='brand-blue'

2. Responsive Utility Syntax

   If you want to add top padding of 32px only on medium and larger screens using Tailwind CSS, which class should you use?

   1. A. pt-8
   2. B. md:pt-8
   3. C. sm:pt-8
   4. D. pt-md-8
   5. E. padt-md-8

3. Flexbox Centering Technique

   Given a u003Cdivu003E container, how can you use Tailwind CSS utilities to center its child both vertically and horizontally?

   1. A. flex justify-center items-center
   2. B. block align-center
   3. C. flex-center justifyitems-center
   4. D. flex align-middle center-content
   5. E. container-center flex-items-center

4. Purge Option and Optimization

   What is the main function of the 'purge' (or 'content') option in Tailwind's configuration file?

   1. A. To remove unused utility classes and minimize the generated CSS file
   2. B. To enable dark mode
   3. C. To apply custom fonts
   4. D. To reset the browser stylesheet
   5. E. To extend media query breakpoints

5. Just-in-Time Compilation

   How does Tailwind CSS's Just-in-Time (JIT) mode improve development and production workflow?

   1. A. By generating CSS for only the classes used in your source files at build or serve time
   2. B. By loading all possible classes in advance and increasing file size
   3. C. By compiling CSS on the server after every user visit
   4. D. By updating the browser stylesheet every second
   5. E. By embedding classes inline within JavaScript files

6. Dark Mode Configuration

   Which approach allows you to enable dark mode styling in a Tailwind CSS project?

   1. A. Setting darkMode: 'media' in tailwind.config.js and using dark: utility classes
   2. B. Adding a u003Cdarku003E tag in HTML
   3. C. Using the class text-dark-mode on elements
   4. D. Changing body color to #000
   5. E. Setting darkMode: true with no additional changes

7. Applying the @apply Directive

   Which statement correctly explains the role of the @apply directive in Tailwind CSS?

   1. A. It allows you to compose multiple utility classes into a single custom CSS class
   2. B. It imports external CSS files into your project
   3. C. It checks whether all utilities are used
   4. D. It applies CSS only to hover states
   5. E. It removes duplicate utility classes automatically

8. Responsive Card Layout Construction

   Which set of Tailwind CSS classes would best create a basic card layout that is responsive for different screen sizes?

   1. A. w-full rounded shadow p-4 md:w-1/2
   2. B. blockcard shadow-lg m-4 xs:pl-2
   3. C. card-box rounded-xl width-100 pb-4 sm:ml-4
   4. D. row-card shadow-md px-8 md:px-16
   5. E. card:responsive flexbox-1 py-10

9. Grid Layout Utilities

   Suppose you want to create a 3-column grid with 16px gap between columns in Tailwind CSS. Which combination of classes would achieve this layout?

   1. A. grid grid-cols-3 gap-4
   2. B. flex grid-3col gap-t-16
   3. C. grid-col-3 grid-gap-4
   4. D. flex-cols-3 space-x-4
   5. E. grid:3 gap 16

10. Text Alignment Utilities Accuracy

    Given a paragraph you wish to align to the right using Tailwind CSS, which utility class should you apply?

    1. A. text-right
    2. B. align-right
    3. C. txt-right
    4. D. paragraph-right
    5. E. text-align-right