Top Tailwind CSS MCQ Questions with Answers (Beginner to Advanced)

1. How do you apply a background using Tailwind CSS?

1. 'Bg-color-blue'
2. 'Background-blue'
3. 'Bg-blue-500'
4. 'Background-color-blue-500'

Ans: 3) 'bg-color-500'

Explanations: The class bg-blue-500 sets the background color of an element to a specific shade of blue.

2. Which class would you use in Tailwind to center text horizontally?

1. 'Text-center'
2. 'Align-center'
3. 'Text-middle'
4. 'center-text'

Ans: 1) 'text-center'

Explanations: The text-center class in Tailwind CSS centers the text horizontally within its container. 

3. What is the value in px for one spacing unit in Tailwind CSS?

1. 4px
2. 5px
3. 8px
4. 10px

Ans: 1): 4px

Explanations: In Tailwind CSS, the base unit for spacing is 0.25rem, which equals 4px (since 1rem is 16px by default).

4. Who inherits the spacing scale in Tailwind CSS?

1. padding
2. margin
3. width
4. All of these

Ans: 4) All of these

Explanations: In Tailwind CSS, the spacing scale applies to padding, margin, and width, as all are based on the same unit scale.

5. What is the valid value for the screens key in Tailwind CSS?

1. sm
2. md
3. lg
4. All of these

Ans: 4) All of these

Explanations: The screens key in Tailwind CSS can include values like sm, md, and lg to define responsive breakpoints for different screen sizes.

6. What is not a CSS pre-processor like Tailwind CSS?

1. Sass
2. Less
3. Stylus
4. None of the above

Ans: 4) None of the above

Explanations: Sass, Less, and Stylus are all CSS pre-processors, whereas Tailwind CSS is a utility-first CSS framework, not a pre-processor.

7. What is not a Pseudo-class in Tailwind CSS?

1. The class :hover
2. The class :focus
3. The class :required
4. None of these

Ans: 3): The class: required

Explanations: In Tailwind CSS, :hover and :focus are valid pseudo-classes for applying styles on hover and focus states, while :required is not a pseudo-class in Tailwind CSS.

8. What is the core concept behind Tailwind CSS?

1. Writing custom CSS classes for each component.
2. Predefined utility classes for rapid UI development.
3. A grid-based layout system.

4. A responsive design framework.

Ans: 2): Predefined utility classes for rapid UI development.

Explanations: The Tailwind CSS provides a set of utility classes that can be directly applied to HTML elements.

9. How do you add a margin of 8 pixels to the top of an element in Tailwind CSS?

1. margin-top-8
2. mt-8
3. top-margin-8
4. Margin-top: 8px

Ans: 2): mt-8

Explanations: The Tailwind CSS uses a shorthand notation where "mt" stands for margin-top and the number indicates the size in predefined units.

10. Which of the following is a valid Tailwind CSS class for creating a centered container?

1. contain
2. center
3. mx-auto
4. align-center

Ans: 1): contain

Explanations: The "container" class creates a responsive container with a maximum width that automatically centers itself.

11. What is the purpose of the responsive design system in Tailwind CSS?

1. To create different layouts for different screen sizes.
2. To manage colors efficiently.
3. To handle typography styles.
4. To create custom components.

Ans: 1): To create different layouts for different screen sizes.

Explanations: Tailwind CSS offers utility classes with suffixes like sm, md, lg, xl, etc, to apply styles based on screen size.

12. How would you create a button with a blue background and white text in Tailwind CSS?

1. <button class="bg-blue-500 text-white">Click me</button>
2. <button style="background-color: blue; color: white;">Click me</button>
3. <button class="button-blue">Click me</button>
4. <button class="blue-button">Click me</button>

Ans: 1): <button class="bg-blue-500 text-white">Click me</button>

Explanations: bg-blue-500 sets the background color to a shade of blue, and text-white sets the text color to white.

13. Which Tailwind CSS class would you use to add padding of 4 units to all sides of an element?

1. padding-4
2. p-4
3. all-padding-4
4. padding

Ans: 2): p-4

Explanations: "p-4" is the correct Tailwind CSS class to add padding of 4 units to all sides of an element.

14. Which Tailwind CSS utility class would you use to create a vertical space of 8 units between elements?

1. space-y-8
2. margin-top-8
3. gap-8
4. spacing-y-8

Ans: 1): space-y-8

Explanations: The "space-y-8" adds a vertical space of 8 units between child elements of a flex or grid container.

15. What does the text-sm class do in Tailwind CSS?

1. Sets the font size to small.
2. Makes the text semi-bold.
3. Adds a shadow to the text.
4. Changes the text color to gray.

Ans: 1): Sets the font size to small.

Explanations: The "text-sm" sets the font size to a small size as defined in the Tailwind configuration.

16. Which Tailwind CSS class would you use to set the text color to red?

1. text-red
2. text-red-500
3. bg-red
4. color-red

Ans: 2): text-red-500

Explanations: In Tailwind CSS, the "text-red-500" sets the text color to a medium shade of red, where the 'text-colorName' is the color and the number indicates the shades.

17. What is the default breakpoint for lg in Tailwind CSS?

1. 768px
2. 1024px
3. 1280px
4. 1440px

Ans: 3): 1280px

Explanations: The lg breakpoint is set to 1280px, which is used to apply styles for large screens.

18. How can you use Tailwind CSS to hide an element on small screens but show it on medium and larger screens?

1. hidden md:block
2. block sm:hidden
3. invisible md:visible
4. none md:flex

Ans: 1): hidden md:block

Explanations: The hidden class hides the element on all screens, and the "md:block" class makes the element visible as a block on medium screens and larger.

19. What is the utility class to make text bold in Tailwind CSS?

1. font-bold
2. text-bold
3. bold-text
4. font-weight-bold

Ans: 1): font-bold

Explanations: The font-bold class applies the font-weight: bold; style to the text.

20. How can you apply a box shadow effect to an element in Tailwind CSS?

1. Box-shadow-md
2. Shadow-md
3. Shadow-effect-md
4. shadow-box-md

Ans: 2): Shadow-effect-md

Explanations: The "shadow-md" class applies a medium-sized box shadow to an element.