Learn Tailwind CSS – Interview Questions, Concepts & Examples

What is CSS and how does it work with HTML?

What are CSS selectors and what types exist?

Explain CSS specificity and how cascading determines which styles apply.

Explain the CSS box model and its components.

What is the difference between margin and padding in CSS?

Explain the CSS display property and its common values (block, inline, inline-block, none).

Explain CSS position property (static, relative, absolute, fixed, sticky).

What is Flexbox and how does it work?

Explain CSS Grid basics and when to use it over Flexbox.

What are CSS units? Explain absolute vs relative units (px, rem, em, vw, vh, %).

What is responsive design and what are the basic principles?

Explain media queries and how to write them in CSS and Tailwind.

What are pseudo-classes in CSS and name common ones (hover, focus, nth-child, etc.)?

Explain pseudo-elements (::before, ::after) and their use cases.

What is CSS overflow and its values (visible, hidden, scroll, auto)?

Explain z-index and stacking context.

What are CSS custom properties (CSS variables) and how to use them?

Explain CSS transitions and how to create smooth interactions.

What are CSS animations and how do they differ from transitions?

What is Tailwind CSS and what problems does it solve?

Why choose Tailwind CSS over traditional CSS frameworks like Bootstrap?

Explain utility-first CSS and its advantages over semantic CSS.

How do you install and set up Tailwind CSS in a project?

Explain the basics of tailwind.config.js file.

How do Tailwind spacing utilities work and how to customize them?

How does Tailwind handle colors and what are best practices?

Explain Tailwind typography utilities and the Typography plugin.

How do responsive utilities work in Tailwind?

What Flexbox utilities does Tailwind provide?

What Grid utilities does Tailwind provide?

How do hover, focus, and other state variants work in Tailwind?

How does dark mode work in Tailwind CSS?