Tailwind CSS Interview Questions & Answers

Basic Level (1–20)

1. What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes to build custom designs directly in HTML.

2. What is utility-first CSS?

It means styling elements using small reusable classes like p-4, text-center, instead of writing custom CSS.

3. Advantages of Tailwind CSS?

Faster UI development
No context switching between HTML and CSS
Highly customizable
Small production bundle with purge

4. Difference between Tailwind and Bootstrap?

Tailwind is utility-first, Bootstrap is component-based.

5. How to install Tailwind?

Using npm:

npm install -D tailwindcss

6. What is Tailwind config file?

tailwind.config.js is used to customize theme, colors, spacing, etc.

7. What is JIT mode?

Just-In-Time compiler generates styles on demand.

8. What is purge/content?

Removes unused CSS in production.

9. How to center a div?

flex justify-center items-center

10. What is `container` class?

Provides responsive fixed-width container.

Layout & Spacing (21–40)

21. Difference between `m` and `p`?

m = margin
p = padding

22. What is `mx-auto`?

Horizontally center element.

23. How to create equal width columns?

flex-1

24. What is `space-x-4`?

Adds horizontal spacing between children.

25. Difference between flex and grid?

Flex is 1D, grid is 2D layout.

26. How to make full height?

h-screen

27. What is `gap`?

Spacing between grid/flex items.

28. What is `overflow-hidden`?

Hides overflow content.

29. How to make sticky header?

sticky top-0

30. What is `z-index` in Tailwind?

z-10 z-50

Typography (41–55)

41. How to change font size?

text-xl text-2xl

42. Font weight classes?

font-bold font-semibold

43. Text alignment?

text-center text-left

44. Line height?

leading-loose

45. Letter spacing?

tracking-wide

Colors & Borders (56–70)

56. How to set background color?

bg-blue-500

57. Border color?

border-red-500

58. Border radius?

rounded-lg

59. Opacity?

opacity-50

60. Hover effect?

hover:bg-blue-500

Flexbox & Grid (71–85)

71. Flex direction?

flex-col flex-row

72. Justify content?

justify-between

73. Align items?

items-center

74. Grid columns?

grid-cols-3

75. Grid gap?

gap-4

Responsive Design (86–95)

86. Breakpoints in Tailwind?

87. Example:

md:text-xl lg:text-2xl

88. Mobile-first approach?

Default styles for mobile, then override for larger screens.

Advanced Level (96–110+)

96. What is `@apply`?

Used to apply utility classes inside CSS.

97. What is `theme()` function?

Access Tailwind config values.

98. Custom colors kaise add kare?

theme: {
  extend: {
    colors: {
      primary: "#ff0000"
    }
  }
}

99. Dark mode kaise use kare?

dark:bg-black

100. Plugins kya hote hain?

Extend Tailwind functionality.

Real Interview Questions

101. Tailwind performance kaise optimize karte ho?

Using purge/content configuration.

102. Tailwind vs SCSS?

Tailwind is utility-based, SCSS is custom CSS with features.

103. Tailwind ka bundle size kaise reduce hota hai?

Unused CSS remove hota hai.

104. Tailwind scalable hai?

Yes, with proper config and component abstraction.

105. Large project me Tailwind kaise manage karte ho?

Reusable components
Config customization
Design system

Final Tip for Interview

Agar interviewer pooche:
"Why Tailwind?"

Best answer:

Faster development
No naming conflicts
Highly customizable
Production optimized

100+ Tailwind CSS Interview Questions with Answers