Question 1

What is Tailwind CSS?

Accepted Answer

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Unlike Bootstrap, it doesn't provide pre-built components (like buttons or navbars). Instead, it provides low-level utility classes that let you build completely custom designs without leaving your HTML.

Question 2

What does 'Utility-First' mean?

Accepted Answer

A utility-first approach means styling elements by applying small, single-purpose classes (utilities) directly in the HTML. For example, instead of a '.btn' class, you might use 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'.

Question 3

What are the advantages of using Tailwind CSS?

Accepted Answer

Advantages include: No more inventing class names, CSS files stop growing, making changes is safer, faster development cycles, and deep customization through the config file.

Question 4

How do you install Tailwind CSS?

Accepted Answer

Tailwind can be installed via npm (recommended) using 'npm install -D tailwindcss postcss autoprefixer' followed by 'npx tailwindcss init' to create the config file.

Question 5

What is the tailwind.config.js file?

Accepted Answer

This is the configuration file where you define your design tokens (colors, fonts, spacing), plugins, and 'content' paths (where Tailwind looks for class names to generate CSS).

Question 6

Explain the 'content' option in tailwind.config.js.

Accepted Answer

The 'content' option (formerly 'purge') tells Tailwind which files to scan for class names. This ensures that only the CSS you actually use is generated in the final production bundle.

Question 7

What are Directive in Tailwind CSS?

Accepted Answer

Directives are custom Tailwind-specific '@' rules used in your CSS files. Main ones are @tailwind (injects styles), @apply (applies utilities to CSS), and @layer (organizes custom styles).

Question 8

What is the @apply directive?

Accepted Answer

@apply allows you to inline existing utility classes into your own custom CSS. This is useful for cleaning up HTML when you have highly repetitive component patterns.

Question 9

How to use hover and focus states in Tailwind?

Accepted Answer

Tailwind uses modifiers for states. Prefix any utility with the state name and a colon. Example: 'hover:bg-red-500', 'focus:outline-none', 'active:scale-95'.

Question 10

What are responsive modifiers?

Accepted Answer

Responsive modifiers (sm:, md:, lg:, xl:, 2xl:) allow you to apply styles at specific breakpoints. Tailwind is mobile-first, so 'w-full md:w-1/2' means full width on mobile and half on medium screens and up.

Question 11

How to handle Dark Mode in Tailwind?

Accepted Answer

Tailwind includes a 'dark:' modifier. You can enable it in tailwind.config.js using either 'media' (follows system prefs) or 'class' (toggled by a class on the html element).

Question 12

Difference between Tailwind and Bootstrap?

Accepted Answer

Bootstrap is component-based (ready-made UI). Tailwind is utility-based (building blocks). Tailwind offers more design freedom, while Bootstrap offers faster initial prototyping for generic designs.

Question 13

What is PostCSS?

Accepted Answer

PostCSS is a tool for transforming CSS with JavaScript. Tailwind CSS is a PostCSS plugin. It handles things like nesting, autoprefixing, and utility generation.

Question 14

How to use arbitrary values in Tailwind?

Accepted Answer

Use square brackets to apply values not in your theme. Example: 'top-[117px]', 'bg-[#1da1f2]', 'w-[calc(100%-1rem)]'.

Question 15

What is the @layer directive?

Accepted Answer

@layer tells Tailwind which 'bucket' a set of custom styles belongs to: 'base' (resets), 'components' (classes like .btn), or 'utilities' (single-purpose classes).

Question 16

How to add custom colors?

Accepted Answer

In the theme.extend.colors section of tailwind.config.js. Example: extend: { colors: { 'brand-blue': '#123456' } }.

Question 17

What is 'Preflight' in Tailwind?

Accepted Answer

Preflight is a set of base styles (resets) built on top of modern-normalize, designed to smooth out cross-browser inconsistencies and provide a clean slate.

Question 18

How to disable Preflight?

Accepted Answer

In tailwind.config.js, set corePlugins: { preflight: false }. This is useful when integrating Tailwind into an existing project with its own resets.

Question 19

Explain the spacing scale in Tailwind.

Accepted Answer

By default, 1 unit equals 0.25rem (4px). So 'm-4' is 1rem (16px), 'p-8' is 2rem (32px), etc.

Question 20

What are transition utilities?

Accepted Answer

Classes like 'transition-all', 'duration-300', 'ease-in-out' are used to add smooth animations to property changes.

Question 21

How to use 'group' hover?

Accepted Answer

Apply the 'group' class to a parent element, and then use 'group-hover:' modifiers on children to trigger styles when the parent is hovered.

Question 22

What is 'peer' modifier?

Accepted Answer

Similar to group, but for siblings. Apply 'peer' to a preceding element and 'peer-checked:...' or 'peer-hover:...' to a following sibling.

Question 23

How to handle opacity?

Accepted Answer

Use 'opacity-{value}' for entire elements, or the slash syntax for colors like 'bg-blue-500/50' (50% opacity background).

Question 24

What is the purpose of 'important' modifier?

Accepted Answer

Prefixing a class with '!' (e.g., '!mt-4') adds !important to the generated CSS. Useful for overriding stubborn 3rd party styles.

Question 25

How to use Container queries?

Accepted Answer

Using the '@tailwindcss/container-queries' plugin. It allows styling elements based on the size of their parent container rather than the viewport.

Question 26

What are 'Variants' in Tailwind?

Accepted Answer

Variants are the modifiers like hover:, focus:, sm:, etc. You can enable/disable them for specific plugins in the config file (though modern Tailwind handles this automatically).

Question 27

How to extend the spacing scale?

Accepted Answer

In config under theme.extend.spacing. Adding '72': '18rem' will create classes like 'm-72', 'w-72', etc.

Question 28

What is the difference between 'theme' and 'extend' in config?

Accepted Answer

'theme' overrides the entire default configuration for that section. 'extend' merges your values with the defaults.

Question 29

Explain typography in Tailwind.

Accepted Answer

Tailwind provides utilities for everything from 'text-sm' to 'text-9xl', 'font-bold', 'leading-tight' (line height), and 'tracking-wide' (letter spacing).

Question 30

What is the 'aspect-ratio' utility?

Accepted Answer

Utilities like 'aspect-video' or 'aspect-square' use the native CSS aspect-ratio property to force elements to maintain proportions.

Tailwind CSS Interview Master

Difficulty Filters

Tools & Options

What is Tailwind CSS?

What does 'Utility-First' mean?

What are the advantages of using Tailwind CSS?

How do you install Tailwind CSS?

What is the tailwind.config.js file?

Explain the 'content' option in tailwind.config.js.

What are Directive in Tailwind CSS?

What is the @apply directive?

How to use hover and focus states in Tailwind?

What are responsive modifiers?

How to handle Dark Mode in Tailwind?

Difference between Tailwind and Bootstrap?

What is PostCSS?

How to use arbitrary values in Tailwind?

What is the @layer directive?

How to add custom colors?

What is 'Preflight' in Tailwind?

How to disable Preflight?

Explain the spacing scale in Tailwind.

What are transition utilities?

How to use 'group' hover?

What is 'peer' modifier?

How to handle opacity?

What is the purpose of 'important' modifier?

How to use Container queries?

What are 'Variants' in Tailwind?

How to extend the spacing scale?

What is the difference between 'theme' and 'extend' in config?

Explain typography in Tailwind.

What is the 'aspect-ratio' utility?

How to use CSS Gradients in Tailwind?

Explain the 'ring' utility.

What is 'screen' utility?

How to handle vertical alignment?

What are 'Forms' in Tailwind?

How to use 'line-clamp'?

What is the 'divide' utility?

Explain 'Space Between' (space-x/y).

How to use 'Marker' utility?

What is 'First-letter' and 'First-line'?

How to customize Screen sizes?

Explain the 'Selection' modifier.

How to handle 'Backdrop CSS'?

What are 'Prose' classes?

How to use 'Object Fit' and 'Object Position'?

What is the 'Visible' vs 'Invisible' utility?

Explain 'Isolation' utility.

How to use 'Blend Modes'?

What is 'Filter' utility?

Does Tailwind support CSS Variables?

How to create a simple Flexbox container?

How to center items in Flexbox?

How to make a responsive Grid in Tailwind?

What is the 'flex-1' class?

Difference between 'flex-1', 'flex-auto', and 'flex-none'?

How to use Grid Column span?

What is 'col-start' and 'col-end'?

How to create a Holy Grail layout?

What is the 'container' class in Tailwind?

How to use 'Basis' in Flexbox?

Explain Grid Auto Flow.

What is 'place-items-center'?

How to create a sticky header?

Explain 'Position' utilities.

How to center an absolute element?

What is the 'Z-index' scale in Tailwind?

How to hide an element on desktop but show on mobile?

Explain 'Overflow' utilities.

What is 'Break Inside' utility?

How to create a Sidebar with fixed width?

Explain 'Flex Grow' and 'Flex Shrink'.

How to align self in Grid/Flex?

What is 'Grid Rows'?

Explain 'Box Sizing' in Tailwind.

How to handle Screen Readers only visibility?

What is 'Gap' utility?

How to create a multi-column text layout?