Tailwind CSS
INTERVIEW
QUESTIONS AND ANSWERS
Follow for more insights:
MUHAMMAD SALMAN HUSSAIN
Tailwind CSS QUESTIONS
INTERVIEW AND ANSWERS
1. Why do we use Tailwind CSS?
Answer: Tailwind CSS is used for rapid, responsive web design,
offering customization and reduced CSS file size.
2. What is utility-first in Tailwind CSS?
Answer: Utility-first means using small utility classes to style
elements without writing custom CSS.
3. How can you integrate Tailwind CSS into a project?
Answer: By using CDN links or installing via npm/yarn.
4. What are the benefits of Tailwind CSS?
Answer: Fast development, high customization, responsive
design, but has a learning curve.
5. How does Tailwind CSS differ from other frameworks?
Answer: Tailwind is utility-first, unlike others that are
component-based.
6. What is the Drop Shadow utility in Tailwind CSS?
Answer: Tailwind provides classes like drop-shadow-sm, drop-
shadow-md to apply different shadow effects.
7. What is the container class in Tailwind CSS?
Answer: It is used to set a max-width and center elements for
responsive layouts.
Follow for more insights:
MUHAMMAD SALMAN HUSSAIN
Tailwind CSS QUESTIONS
INTERVIEW AND ANSWERS
8. How does Tailwind CSS handle flex directions?
Answer: With utility classes like flex-row, flex-col, and
their reverse variants.
9. Can you modify the base font-family in Tailwind CSS?
Answer: Yes, by updating the tailwind.config.js file.
10. What is the order property in Tailwind CSS?
Answer: It allows reordering flex or grid items using classes like
order-1, order-last.
11. Can Tailwind CSS and Bootstrap be used together?
Answer: Yes, but it may cause conflicts like with shared class
names.
12. How do you center elements with Tailwind CSS?
Answer: Use utilities like justify-center, items-center,
and mx-auto.
13. How to resize elements using Tailwind CSS?
Answer: Use classes like resize-none, resize-x, and
resize-y.
14. How do you implement box shadows in Tailwind CSS?
Answer: Using shadow classes like shadow-md, shadow-lg, or
shadow-none.
Follow for more insights:
MUHAMMAD SALMAN HUSSAIN
Tailwind CSS QUESTIONS
INTERVIEW AND ANSWERS
15. How do you create a grid layout with Tailwind CSS?
Answer: Using grid, grid-cols, and gap utility classes.
16. What is the purpose of space-x and space-y in
Tailwind CSS?
Answer: These utilities control horizontal and vertical spacing
between child elements.
17. What is the fill class in Tailwind CSS?
Answer: It controls the fill color of SVG elements.
18. How do you handle hover and focus states with
Tailwind CSS?
Answer: Using hover:{property} and focus:{property}
utility classes.
19. What are responsive variants in Tailwind CSS?
Answer: Classes like sm, md, lg for responsive breakpoints
based on screen size.
20. How to add new colors to Tailwind CSS without
removing the default ones?
Answer: By updating the theme section of
tailwind.config.js.
Follow for more insights:
MUHAMMAD SALMAN HUSSAIN
Tailwind CSS QUESTIONS
INTERVIEW AND ANSWERS
21 . How does Tailwind CSS handle opacity?
Answer: It provides utility classes from opacity-0 to
opacity-100.
22. How to create sticky headers in Tailwind CSS?
Answer: Use classes like sticky, top-0, and inset-x-0.
23. How to create custom utilities in Tailwind CSS?
Answer: Use @layer in tailwind.config.js to define
custom utilities.
24. How does Tailwind handle flex-wrap?
Answer: Use the flex-wrap class to wrap items or prevent
wrapping with flex-nowrap.
25. How to apply transform properties in Tailwind CSS?
Answer: Use classes like transform, scale-50, and
rotate-90 for transformations.
Follow for more insights:
MUHAMMAD SALMAN HUSSAIN
Download or save
this document for later.
Follow for more insights:
MUHAMMAD SALMAN HUSSAIN
