[{"data":1,"prerenderedAt":512},["ShallowReactive",2],{"all-questions-tailwind":3},{"beginner":4,"intermediate":228,"advanced":374},[5,15,22,30,37,45,52,59,66,73,80,87,94,101,108,115,123,131,138,145,152,159,165,172,179,186,193,200,206,211,216,222],{"id":6,"category":7,"question":8,"answer":9,"level":10,"tags":11},1,"Fundamentals","What is CSS and how does it work with HTML?","**Concept Explanation:** CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation, layout, and styling of HTML documents. It separates content from design, enabling responsive and visually appealing web pages.\n\n**Internal Behavior:** Browsers parse HTML into a DOM tree, then apply CSS rules to each node, computing final styles (Cascade). Styles are applied based on selector specificity, origin, and inheritance. The browser then constructs the render tree and paints pixels.\n\n**Syntax Explanation:** CSS consists of selectors and declaration blocks: `selector { property: value; }`. Example: `h1 { color: blue; }`. CSS can be inline, internal (`\u003Cstyle>`), or external (`.css` file linked via `\u003Clink>`).\n\n**CSS Examples:**\n```css\nbody {\n  font-family: Arial;\n  margin: 0;\n  background: #f0f0f0;\n}\n.btn { background: blue; color: white; }\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"bg-gray-100 font-sans m-0\">\n  \u003Cbutton class=\"bg-blue-500 text-white px-4 py-2 rounded\">Button\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n```\n\n**Practical Examples:** Styling a card: CSS: `.card { border: 1px solid; padding: 16px; }`. Tailwind: `\u003Cdiv class=\"border p-4 rounded shadow\">`.\n\n**Common Mistakes:** Overly specific selectors, using `!important` excessively, not resetting default margins, and forgetting responsive design.\n\n**Edge Cases:** Very large stylesheets can block rendering; CSS parsed progressively, but external CSS can cause FOUC (Flash of Unstyled Content).\n\n**Interview Follow-ups:** How does CSS parsing affect First Contentful Paint? Explain critical CSS. What is CSSOM?\n\n**Best Practices:** Use external stylesheets, maintain low specificity, follow BEM or utility-first (Tailwind), and leverage browser dev tools.\n\n**Responsive Considerations:** Use media queries or Tailwind’s responsive prefixes (`md:`, `lg:`) to adapt layouts to screen sizes.\n\n**Accessibility Considerations:** Ensure sufficient color contrast, support `prefers-reduced-motion`, don't rely on color alone for information.\n\n**Performance Optimization:** Minify CSS, tree-shake unused styles (Tailwind’s `content` config), and inline critical CSS for above-the-fold content.\n\n**Production Recommendations:** Use CSS-in-JS or Tailwind with PurgeCSS; implement versioned assets (cache busting), and CDN delivery.\n\n**Latest Tailwind Patterns:** Using `@layer` components, `@apply` for custom classes, and JIT mode for on-demand generation.\n\n**Interview Tip:** Emphasize separation of concerns and how CSS enhances UX.\n\n**Common Follow-up:** How would you debug CSS specificity conflicts? Use browser inspector to trace cascade.\n\n**Real-world Example:** Styling a blog post: Tailwind classes `prose prose-lg` (via `@tailwindcss\u002Ftypography`) for automatic typographic styling.","beginner",[12,13,14],"css","fundamentals","tailwind",{"id":16,"category":17,"question":18,"answer":19,"level":10,"tags":20},2,"Selectors","What are CSS selectors and what types exist?","**Concept Explanation:** Selectors define which HTML elements CSS rules apply to. They range from simple element names to complex patterns using attributes, hierarchy, and pseudo-classes.\n\n**Internal Behavior:** Browser matches selectors from right to left for efficiency. For `div p`, it finds all `\u003Cp>` then checks parent chain. Selector specificity determines which rule wins.\n\n**Syntax Explanation:** Basic: type (`div`), class (`.btn`), ID (`#header`), universal (`*`), attribute (`[type='text']`). Combinators: descendant (space), child (`>`), adjacent sibling (`+`), general sibling (`~`). Pseudo-classes (`:hover`), pseudo-elements (`::before`).\n\n**CSS Examples:**\n```css\n* { box-sizing: border-box; }\n.nav > li { display: inline-block; }\ninput:checked + label { font-weight: bold; }\n```\n\n**Tailwind Examples:** Tailwind doesn’t write custom selectors; instead uses utility classes. But you can use `@apply` with custom selectors in CSS:\n```css\n.btn-primary {\n  @apply bg-blue-500 text-white;\n}\n.btn-primary:hover {\n  @apply bg-blue-700;\n}\n```\nOr use arbitrary variants: `[&>li]:inline-block`.\n\n**Practical Examples:** Selecting all even table rows: `tr:nth-child(even) { background: #f9f9f9; }` → Tailwind: `even:bg-gray-50`.\n\n**Common Mistakes:** Overly broad selectors (`div` everywhere) causing unintended styling; misunderstanding `:nth-child` vs `:nth-of-type`; forgetting that ID selectors have high specificity.\n\n**Edge Cases:** `:not()` pseudo-class increases specificity; complex selectors with many combinators may impact performance.\n\n**Interview Follow-ups:** How does selector performance affect reflows? Which selectors are most expensive? Explain `:is()` and `:where()`.\n\n**Best Practices:** Use class selectors for styling, limit descendant depth to 3 levels, avoid universal selectors in key paths.\n\n**Responsive Considerations:** Combine selectors with media queries: `@media (max-width: 768px) { .nav li { display: block; } }`.\n\n**Accessibility:** Use `:focus-visible` instead of `:focus` to show focus only for keyboard users. Avoid `:focus` outlines removal without replacement.\n\n**Performance Optimization:** Specific selectors like ID are fast; sibling selectors `~` and `+` are moderate; attribute selectors with regex are slower.\n\n**Production Recommendations:** Use CSS Modules or Tailwind to avoid global selector conflicts. For large apps, enforce selector naming convention.\n\n**Latest Tailwind Patterns:** Using arbitrary variants like `[&_p]:text-gray-700` to target descendants in one line.\n\n**Interview Tip:** Know specificity hierarchy: inline styles > IDs > classes\u002Fattributes > elements.\n\n**Common Follow-up:** Write a selector for an `\u003Cinput>` that is `:invalid` and inside a form with class `.signup`.\n\n**Real-world Example:** In an e-commerce product grid, select `.product-card:hover .product-title` to underline on hover. Tailwind: `group-hover:underline` inside `group` container.",[12,21,14],"selectors",{"id":23,"category":24,"question":25,"answer":26,"level":10,"tags":27},3,"Cascade","Explain CSS specificity and how cascading determines which styles apply.","**Concept Explanation:** Specificity is a weight assigned to CSS selectors. When multiple rules target the same element, the browser applies the one with highest specificity. The cascade resolves conflicts considering importance, origin, and order.\n\n**Internal Behavior:** Browser computes specificity as a 4-part value: (inline style count, ID count, class\u002Fpseudo-class\u002Fattribute count, element\u002Fpseudo-element count). Higher left column wins. `!important` overrides normal specificity but creates maintenance issues.\n\n**Syntax Explanation:** Specificity scores: Inline style = 1,0,0,0; ID = 0,1,0,0; Class\u002Fattribute\u002Fpseudo-class = 0,0,1,0; Element\u002Fpseudo-element = 0,0,0,1. Universal selector `*` has 0,0,0,0.\n\n**CSS Examples:**\n```css\n\u002F* specificity 0,0,0,2 *\u002F\nbody h1 { color: gray; }\n\u002F* specificity 0,1,0,0 *\u002F\n#title { color: black; }\n\u002F* wins over ID? 0,0,1,0 vs 0,1,0,0 → ID wins *\u002F\n.title { color: red; }\n```\n\n**Tailwind Examples:** Tailwind generates utility classes with equal specificity (all single class). To override, use `!important` suffix: `!text-center` or config with `important: true`. Better: use more specific selector via `@layer components`.\n\n**Practical Examples:** Button styling: `.btn` (0,0,1,0) vs `#submit .btn` (0,1,1,0) – ID wins. Avoid deep nesting.\n\n**Common Mistakes:** Relying on `!important` to fix specificity wars; not understanding that later rule with equal specificity wins; misreading pseudo-element specificity.\n\n**Edge Cases:** `:not()` pseudo-class does not add to specificity; `:where()` has 0 specificity. `:is()` takes highest specificity among its arguments.\n\n**Interview Follow-ups:** How would you handle a third-party widget with high-specificity styles? Use `all: initial` or iframe. Explain cascade layers (`@layer`).\n\n**Best Practices:** Keep specificity low and flat. Use class-based BEM or utility-first (Tailwind). Reserve IDs for JavaScript hooks, not styling.\n\n**Responsive Considerations:** Media queries do not affect specificity; order of media rules matters if selectors have same specificity.\n\n**Accessibility:** For forced colors modes, specificity can affect inheritance; use `system-ui` keywords when possible.\n\n**Performance Optimization:** Lower specificity reduces recalc time; browser matches fewer rules per element.\n\n**Production Recommendations:** Use CSS Modules or Tailwind to eliminate specificity conflicts. In large teams, enforce stylelint rule `max-specificity`.\n\n**Latest Tailwind Patterns:** Using `@layer base, components, utilities` to control output order. Tailwind's utilities always have same specificity, ensuring predictable overrides.\n\n**Interview Tip:** Explain the cascade order: transitions > important user agent > important user > important author > animations > normal author > normal user > user agent.\n\n**Common Follow-up:** If you have `.box` and `div.box`, which has higher specificity? Class + element (0,0,2,0) vs class alone (0,0,1,0), so `div.box` wins.\n\n**Real-world Example:** A legacy project uses `!important` on buttons. Refactor by scoping new styles with specific parent class: `.app .btn { }` to override without `!important`.",[12,28,29,14],"specificity","cascade",{"id":31,"category":32,"question":33,"answer":34,"level":10,"tags":35},4,"Box Model","Explain the CSS box model and its components.","**Concept Explanation:** Every element in CSS is a rectangular box composed of: content, padding, border, and margin. Total width = content width + padding-left\u002Fright + border-left\u002Fright + margin-left\u002Fright (when using default `box-sizing: content-box`).\n\n**Internal Behavior:** Browser calculates layout dimensions based on box model. `box-sizing: border-box` includes padding and border inside the declared width, preventing overflow. Default `content-box` can cause unexpected sizing.\n\n**Syntax Explanation:** Properties: `width`, `height`, `padding` (top\u002Fright\u002Fbottom\u002Fleft), `border`, `margin`. Shorthands: `padding: 10px 20px;` (vertical, horizontal). `box-sizing: border-box` is widely used in resets.\n\n**CSS Examples:**\n```css\n.box {\n  width: 200px;\n  padding: 20px;\n  border: 5px solid black;\n  margin: 10px;\n  box-sizing: border-box; \u002F* total width = 200px *\u002F\n}\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"w-48 p-5 border border-black m-2 box-border\">\n  Content\n\u003C\u002Fdiv>\n\u003C!-- w-48 = width 12rem, padding & border inside -->\n```\n\n**Practical Examples:** Card with image: Use `p-4`, `border`, `rounded-lg`, and `m-2` to create consistent spacing without breaking parent width.\n\n**Common Mistakes:** Forgetting `box-sizing: border-box` leads to horizontal scroll; negative margins causing overlap; collapsing margins between adjacent vertical blocks.\n\n**Edge Cases:** Margin collapse occurs for vertical adjacent siblings and parent–first\u002Flast child (unless parent has padding\u002Fborder\u002Fflex\u002Fgrid). Inline elements ignore top\u002Fbottom margins.\n\n**Interview Follow-ups:** How do inline-block and flex affect margin collapse? Explain difference between `margin` auto and alignment properties.\n\n**Best Practices:** Apply `*, *::before, *::after { box-sizing: border-box; }` universally. Use margin for spacing between components, padding for inner spacing.\n\n**Responsive Considerations:** Use responsive margin\u002Fpadding: `md:p-8`, `sm:m-2`. On small screens reduce spacing.\n\n**Accessibility Considerations:** Avoid large margins that push content off-screen at narrow widths; use relative units (rem\u002Fem) to respect zoom.\n\n**Performance Optimization:** Changes to margin\u002Fpadding trigger layout (reflow); batch DOM updates and use `transform` for animations.\n\n**Production Recommendations:** Adopt a spacing scale (e.g., Tailwind’s spacing scale: 0, 1, 2, 4, 6, 8…). Avoid arbitrary values unless necessary.\n\n**Latest Tailwind Patterns:** Using `space-x-4` and `space-y-4` utilities for automatic gap between children without margin overrides.\n\n**Interview Tip:** Be ready to draw the box model and calculate element’s actual width.\n\n**Common Follow-up:** Why does `margin: 0 auto` center block elements? Because auto margin distributes available horizontal space equally.\n\n**Real-world Example:** A responsive card grid: container `p-4` (inner spacing), each card `m-2` (margin between), using `box-border` ensures `w-full md:w-1\u002F3` doesn’t overflow.",[12,36,14],"box-model",{"id":38,"category":39,"question":40,"answer":41,"level":10,"tags":42},5,"Spacing","What is the difference between margin and padding in CSS?","**Concept Explanation:** Margin creates space outside an element's border (between elements), while padding creates space inside the element, between the content and its border. Margin can be negative, padding cannot.\n\n**Internal Behavior:** Margins are part of the layout’s external spacing and can collapse with adjacent margins. Padding contributes to the element’s clickable area and background size. Backgrounds extend into padding but not margin.\n\n**Syntax Explanation:** Both follow same shorthand: `margin: 10px 20px;` (top\u002Fbottom, left\u002Fright). `padding: 8px;` all sides. Tailwind: `m-4` (margin 1rem), `p-4` (padding 1rem).\n\n**CSS Examples:**\n```css\n.card {\n  margin: 16px;      \u002F* space outside card *\u002F\n  padding: 24px;     \u002F* space inside around content *\u002F\n  background: white;\n}\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"m-4 p-6 bg-white shadow\">\n  Content has inner spacing\n\u003C\u002Fdiv>\n\u003C!-- m-4 = margin 1rem, p-6 = padding 1.5rem -->\n```\n\n**Practical Examples:** Buttons: padding increases click area (`px-4 py-2`), margin separates buttons (`mr-2`). Accordion: padding for content comfort, margin for spacing between items.\n\n**Common Mistakes:** Using margin when parent has overflow hidden causing cut-off; using padding to separate sibling elements (should use margin or gap); negative margin overlapping interactive elements.\n\n**Edge Cases:** Margin collapse: two vertical `div`s with `margin-bottom: 20px` and `margin-top: 30px` collapse to 30px. Padding does not collapse. Inline-block elements have different margin behavior.\n\n**Interview Follow-ups:** How does setting `margin: auto` work for centering? When would you use padding vs margin for spacing inside a flex container?\n\n**Best Practices:** Use margin for spacing between unrelated elements; use padding for inner spacing within a component. Use gap in flex\u002Fgrid instead of margin on children.\n\n**Responsive Considerations:** Adjust spacing at breakpoints: `sm:p-2 md:p-4`. For responsive margin between stacked items on mobile vs inline on desktop: `mb-2 md:mb-0 md:mr-2`.\n\n**Accessibility:** Large padding does not impact screen readers, but ensure touch targets are at least 44x44px (use padding to enlarge click area).\n\n**Performance Optimization:** Modifying margins triggers layout, but less expensive than repaint only if no geometry change. Use `transform` for animations instead of margin.\n\n**Production Recommendations:** Define a spacing system (e.g., 4px base) and reuse. Tailwind’s spacing scale ensures consistency. Avoid arbitrary values.\n\n**Latest Tailwind Patterns:** Using `gap-4` in grid\u002Fflex instead of margin on children; using `space-x-2` utilities for stacked horizontal margins.\n\n**Interview Tip:** Demonstrate with a visual diagram: margin = outside, padding = inside, border in between.\n\n**Common Follow-up:** If you set `background-clip: content-box` how does padding affect background? Background does not extend into padding.\n\n**Real-world Example:** A navigation bar: each link `px-3 py-2` (padding for click area) and `ml-2` (margin to separate links) – better use `gap-2` on parent flex container.",[12,43,44,14],"margin","padding",{"id":46,"category":47,"question":48,"answer":49,"level":10,"tags":50},6,"Layout","Explain the CSS display property and its common values (block, inline, inline-block, none).","**Concept Explanation:** `display` defines the outer and inner layout behavior of an element. Block elements occupy full width, start on new line, respect width\u002Fheight. Inline elements flow in text line, ignore width\u002Fheight. Inline-block flows inline but respects block properties. None removes element from layout (not rendered).\n\n**Internal Behavior:** Block creates block formatting context (BFC) in most cases, stacking vertically. Inline generates inline formatting context, no line breaks before\u002Fafter. Changing display triggers reflow for the element and its siblings.\n\n**Syntax Explanation:** `display: block;`, `inline`, `inline-block`, `none`, `flex`, `grid`, etc. Tailwind: `block`, `inline`, `inline-block`, `hidden` (display: none).\n\n**CSS Examples:**\n```css\n.block { display: block; width: 100px; } \u002F* width works *\u002F\n.inline { display: inline; width: 100px; } \u002F* ignored *\u002F\n.inline-block { display: inline-block; width: 100px; }\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"block\">Full width\u003C\u002Fdiv>\n\u003Cspan class=\"inline-block w-20\">Width works, inline flow\u003C\u002Fspan>\n\u003Cbutton class=\"hidden\">Invisible, space collapsed\u003C\u002Fbutton>\n```\n\n**Practical Examples:** Navigation links: `inline-block` to allow padding and margin while sitting horizontally. Centering: `block` with `margin: auto`. Layout debugging: toggle `display` to identify missing space.\n\n**Common Mistakes:** Using `inline` when you need width\u002Fheight; expecting `none` vs `visibility: hidden` (latter hides but occupies space); forgetting that `inline-block` can have whitespace gaps.\n\n**Edge Cases:** `inline-block` elements have unwanted gaps due to whitespace in HTML. Solutions: parent `font-size: 0` or flex. `display: none` not accessible to screen readers (content removed).\n\n**Interview Follow-ups:** How does `display: flex` differ from `block`? What is the difference between `display: none` and `visibility: hidden`? Explain BFC.\n\n**Best Practices:** Use flex\u002Fgrid instead of inline-block for horizontal layouts. Avoid `display: none` for lazy loading; use `opacity: 0` + `visibility: hidden` if space retention needed.\n\n**Responsive Considerations:** Change display per breakpoint: `hidden md:block` to show on desktop only. Useful for mobile menus.\n\n**Accessibility:** `display: none` removes from accessibility tree; screen readers ignore. For off-screen content, use `.sr-only` Tailwind class (visually hidden but accessible).\n\n**Performance Optimization:** Switching `display` between block and flex causes full layout recalculation. For animations use transforms.\n\n**Production Recommendations:** Prefer flex\u002Fgrid over traditional block\u002Finline-block for modern layouts. Use `hidden` utility conditionally based on state.\n\n**Latest Tailwind Patterns:** Using `flow-root` (clearfix replacement) which sets `display: flow-root` to establish BFC.\n\n**Interview Tip:** Compare and contrast with modern layout methods (flex\u002Fgrid). Mention that `display: inline` is rarely used for containers.\n\n**Common Follow-up:** How to center an inline-block element inside a block? Set parent `text-align: center`.\n\n**Real-world Example:** Button group: each button `inline-block` with `mr-2` but better flex with gap. Dropdown menu: use `hidden` toggled to `block` with JavaScript.",[12,51,14],"display",{"id":53,"category":54,"question":55,"answer":56,"level":10,"tags":57},7,"Positioning","Explain CSS position property (static, relative, absolute, fixed, sticky).","**Concept Explanation:** `position` defines how an element is placed in the document. Static is default (normal flow). Relative offsets from normal position. Absolute removes from flow, positions relative to nearest positioned ancestor. Fixed relative to viewport. Sticky hybrid of relative and fixed, based on scroll threshold.\n\n**Internal Behavior:** Absolute\u002Ffixed create new stacking context. Fixed elements ignore parent transforms? Actually fixed positioning is relative to the viewport unless ancestor has `transform`, `filter`, `perspective`, which create containing block for fixed descendants. Sticky elements are treated as relative until scroll reaches threshold, then become fixed.\n\n**Syntax Explanation:** Use `top`, `right`, `bottom`, `left` for offset. Tailwind: `static`, `relative`, `absolute`, `fixed`, `sticky`, plus offset utilities: `top-0`, `right-4`, `inset-0`.\n\n**CSS Examples:**\n```css\n.parent { position: relative; }\n.child { position: absolute; top: 0; left: 0; }\n.header { position: sticky; top: 0; }\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"relative\">\n  \u003Cdiv class=\"absolute top-2 right-2\">Badge\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cnav class=\"sticky top-0 bg-white shadow\">Sticky navbar\u003C\u002Fnav>\n```\n\n**Practical Examples:** Modal overlay: fixed centered. Tooltip: relative parent, absolute tooltip. Table headers sticky. Hero section with absolute text on an image.\n\n**Common Mistakes:** Forgetting to set `position: relative` on parent for absolute children; fixed element inside transformed ancestor becomes relative to that ancestor, not viewport; sticky not working due to overflow hidden on parent.\n\n**Edge Cases:** `sticky` requires `top`\u002F`bottom` threshold and no overflow hidden on any ancestor. Fixed elements in mobile browsers cause weird jump when address bar hides. Z-index issues with stacking contexts.\n\n**Interview Follow-ups:** How does containing block affect absolute\u002Ffixed? What happens to fixed inside `transform`? How to stack sticky headers? Explain stacking context.\n\n**Best Practices:** Use relative sparingly, only as anchor for absolute. Sticky for headers, not for full layouts. Fixed for modals, back-to-top buttons.\n\n**Responsive Considerations:** On mobile, fixed overlays may cause touch issues; sticky might not behave correctly due to virtual keyboard. Test thoroughly.\n\n**Accessibility:** Fixed elements must be dismissible (e.g., modal close). Sticky headers should not trap keyboard focus. Ensure focus order when using absolute.\n\n**Performance Optimization:** Sticky elements recalc position on scroll; avoid many sticky elements. Fixed elements cause repaint on scroll.\n\n**Production Recommendations:** Use `position: sticky` for section headers in long lists. For modals, use fixed + overflow hidden on body to prevent background scroll.\n\n**Latest Tailwind Patterns:** Combine `inset-0` for full-spread absolute\u002Ffixed overlays. Use `sticky top-0 z-10` for headers. Tailwind JIT allows arbitrary `top-[calc(100%+10px)]`.\n\n**Interview Tip:** Discuss the difference between fixed and sticky: fixed always relative to viewport, sticky only after crossing threshold.\n\n**Common Follow-up:** How to center an absolute element? Use `top: 50%; left: 50%; transform: translate(-50%, -50%);`. Tailwind: `absolute top-1\u002F2 left-1\u002F2 -translate-x-1\u002F2 -translate-y-1\u002F2`.\n\n**Real-world Example:** Chat button fixed bottom right: `\u003Cdiv class=\"fixed bottom-4 right-4 bg-blue-500 rounded-full p-3\">Chat\u003C\u002Fdiv>`.",[12,58,14],"positioning",{"id":60,"category":61,"question":62,"answer":63,"level":10,"tags":64},8,"Flexbox","What is Flexbox and how does it work?","**Concept Explanation:** Flexbox is a one-dimensional layout model that distributes space along a main axis and cross axis. It provides powerful alignment, spacing, and ordering capabilities for dynamic interfaces.\n\n**Internal Behavior:** The flex container establishes a flex formatting context. Children become flex items. Flex algorithm calculates available space, distributes based on `flex-grow`, `flex-shrink`, and `flex-basis`. Items align along main axis (row\u002Fcolumn) and cross axis.\n\n**Syntax Explanation:** `display: flex` on parent. Then `flex-direction` (row, column), `justify-content` (main axis alignment), `align-items` (cross axis alignment), `gap` for spacing. On items: `flex-grow`, `flex-shrink`, `flex-basis`, `align-self`, `order`.\n\n**CSS Examples:**\n```css\n.container {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 1rem;\n}\n.item { flex: 1; }\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"flex justify-between items-center gap-4\">\n  \u003Cdiv class=\"flex-1\">Item 1\u003C\u002Fdiv>\n  \u003Cdiv>Item 2\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n**Practical Examples:** Navigation bar: `flex justify-between items-center`. Card grid: `flex flex-wrap gap-4`. Centering content: `flex justify-center items-center h-screen`.\n\n**Common Mistakes:** Forgetting `flex-wrap` causing overflow on small screens; misusing `flex-grow` leading to unexpected widths; ignoring `flex-basis` (initial main size).\n\n**Edge Cases:** `min-width: auto` on flex items prevents shrinking below content size – use `min-w-0` to override. Nested flex containers with `flex: 1` can collapse.\n\n**Interview Follow-ups:** How does flex-basis auto differ from 0%? Explain the difference between `align-items` vs `align-content`. When does `align-content` work?\n\n**Best Practices:** Use gap instead of margin for spacing. Prefer `flex: 1` for equal-width columns. Set explicit `min-width: 0` for truncating text inside flex items.\n\n**Responsive Considerations:** Change flex direction: `flex-col md:flex-row`. Adjust gap and wrap at breakpoints. Use responsive `justify-*`.\n\n**Accessibility:** Flex does not change source order in DOM; `order` property visually reorders but screen readers follow DOM, causing confusion. Avoid using order for semantic changes.\n\n**Performance Optimization:** Flex layout is fast but deeply nested flex containers may cause multiple passes. Use `gap` instead of margin on children to reduce paint.\n\n**Production Recommendations:** Use flex for component-level layouts (nav, toolbars, cards), not entire page. Combine with grid for two-dimensional layouts.\n\n**Latest Tailwind Patterns:** `flex-\u003Cnumber>` arbitrary values: `flex-[2_1_0]`. `flex-wrap` with `gap` utilities. Responsive `flex-shrink-0` for fixed size items.\n\n**Interview Tip:** Demonstrate Holy Grail layout: header, footer, sidebars using flex.\n\n**Common Follow-up:** How to center a single flex item? `margin: auto` on item, or parent `justify-content: center; align-items: center`.\n\n**Real-world Example:** Product row: image fixed width, title flex-1, price auto. Using `flex items-center gap-4`.",[12,65,14],"flexbox",{"id":67,"category":68,"question":69,"answer":70,"level":10,"tags":71},9,"Grid","Explain CSS Grid basics and when to use it over Flexbox.","**Concept Explanation:** CSS Grid is a two-dimensional layout system that handles both rows and columns simultaneously, unlike Flexbox (1D). Grid allows placing items into explicit or implicit tracks, offering precise control.\n\n**Internal Behavior:** Grid container establishes grid formatting context. Defines explicit grid using `grid-template-columns`\u002F`rows`. Items can be placed using line numbers or named areas. Grid algorithm sizes tracks based on content or fractions (`fr`).\n\n**Syntax Explanation:** `display: grid` → parent; `grid-template-columns: repeat(3, 1fr)` (3 equal columns); `grid-template-rows: auto 1fr auto`; `gap: 1rem`; `grid-column: span 2`; or use `grid-template-areas`.\n\n**CSS Examples:**\n```css\n.grid {\n  display: grid;\n  grid-template-columns: 1fr 2fr 1fr;\n  gap: 20px;\n}\n.item { grid-column: span 2; }\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"grid grid-cols-3 gap-5\">\n  \u003Cdiv class=\"col-span-2\">Wide\u003C\u002Fdiv>\n  \u003Cdiv>Normal\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!-- responsive: grid-cols-1 md:grid-cols-3 -->\n```\n\n**Practical Examples:** Full page layout: header, sidebar, main, footer. Dashboard cards: auto-fit responsive grid. Masonry-like (but use CSS grid with dense).\n\n**Common Mistakes:** Using grid for one-dimensional list (prefer flex). Overcomplicating with many line numbers. Not understanding `auto-fit` vs `auto-fill`.\n\n**Edge Cases:** Grid items can overlap with `z-index` using `grid-column: 1 \u002F -1`. Implicit rows creation can cause overflow; use `grid-auto-rows: minmax(0, auto)`.\n\n**Interview Follow-ups:** How does `minmax()` work? Explain `auto-fit` vs `auto-fill`. When would you use `subgrid`? How to create a responsive card grid without media queries?\n\n**Best Practices:** Use grid for page-level layout; use flex for components. Prefer `grid-template-areas` for readability. Use `minmax(0, 1fr)` to prevent overflow.\n\n**Responsive Considerations:** Change column count at breakpoints: `grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`. Use `auto-fit` for responsive number of columns: `repeat(auto-fit, minmax(250px, 1fr))`.\n\n**Accessibility:** Grid order can affect tab order; ensure logical DOM order matches visual order. Screen readers read DOM order, not grid placement.\n\n**Performance Optimization:** Grid layout is efficient, but complex spanning (overlapping) may increase paint complexity. Use `contain: layout` where possible.\n\n**Production Recommendations:** Use Tailwind Grid utilities for rapid development. For highly dynamic grids, use CSS grid with JS to adjust template strings.\n\n**Latest Tailwind Patterns:** `grid-cols-[200px_1fr_200px]` arbitrary values. `grid-flow-dense` for auto-placement. `subgrid` support limited, but Tailwind via `grid-cols-subgrid`.\n\n**Interview Tip:** Mention that Grid and Flexbox can be combined (grid container can have flex children).\n\n**Common Follow-up:** How to make grid items fill remaining height? Set `grid-template-rows: auto 1fr auto` and make main area `min-h-0`.\n\n**Real-world Example:** Product listing page: grid of cards using `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6`. Header\u002Ffooter layout: `grid grid-rows-[auto_1fr_auto] min-h-screen`.",[12,72,14],"grid",{"id":74,"category":75,"question":76,"answer":77,"level":10,"tags":78},10,"Units","What are CSS units? Explain absolute vs relative units (px, rem, em, vw, vh, %).","**Concept Explanation:** CSS units define measurement for lengths. Absolute units (px, pt, cm) are fixed. Relative units (rem, em, vw, vh, %) scale based on other factors, improving responsiveness and accessibility.\n\n**Internal Behavior:** `px` is device-dependent (1px = 1\u002F96th inch). `rem` equals root (`html`) font-size (default 16px). `em` relative to parent's font-size. `vw` = 1% of viewport width. `vh` = viewport height. `%` relative to containing block.\n\n**Syntax Explanation:** Use: `width: 50%; padding: 1rem; margin: 2em; font-size: 2vw;`. Tailwind spacing uses `rem` based: `p-4` = 1rem, `text-base` = 1rem.\n\n**CSS Examples:**\n```css\nhtml { font-size: 16px; }\n.container { width: 80%; max-width: 1200px; }\nh1 { font-size: 2rem; } \u002F* 32px *\u002F\n.child { padding: 1em; } \u002F* relative to parent font *\u002F\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"w-1\u002F2 max-w-5xl text-base\">\n  \u003Cp class=\"text-2xl\">2rem\u003C\u002Fp>\n  \u003Cdiv class=\"p-4\">1rem padding\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n**Practical Examples:** Typography: Use `rem` for font sizes so user’s browser zoom works. Fullscreen hero: `min-h-screen`. Fluid typography: `clamp(1rem, 2vw, 2rem)`.\n\n**Common Mistakes:** Using `em` for font sizes causing compounding; using `px` for containers that should be fluid; not resetting root `font-size` to 62.5% for easier rem calculation (10px base).\n\n**Edge Cases:** `vh` on mobile includes address bar height causing jumps. `%` on height requires parent to have explicit height. `vw` can cause overflow on small devices.\n\n**Interview Follow-ups:** Why is `rem` preferred for accessibility? How to make an element 100% of viewport minus navbar? Use `calc(100vh - 60px)`. Explain `ch` and `ex` units.\n\n**Best Practices:** Use `rem` for typography and spacing; `px` for borders and shadows; `%` or `vw` for fluid containers; `vh` for hero sections.\n\n**Responsive Considerations:** Combine units: `clamp()` for responsive text. Use `min(100%, 1200px)` for max-width. Tailwind breakpoints use `px`, but you can customize.\n\n**Accessibility:** Browsers allow overriding default root font-size; using `rem` ensures layout scales. Avoid `vw` alone for text (can't zoom text-only).\n\n**Performance Optimization:** No direct impact, but complex `calc()` can be slightly slower; generally fine.\n\n**Production Recommendations:** Define a typographic scale using rem (e.g., 0.875rem, 1rem, 1.25rem). Use Tailwind’s spacing scale.\n\n**Latest Tailwind Patterns:** Arbitrary values like `w-[calc(100%-2rem)]`. Using `clamp` via `text-[clamp(1rem,2vw,2rem)]`.\n\n**Interview Tip:** Mention that `em` compounds: nested elements multiply effect, which can be intended or problematic.\n\n**Common Follow-up:** What happens if you set `html { font-size: 62.5% }`? Base becomes 10px, so 1.6rem = 16px, easier conversion.\n\n**Real-world Example:** A card with text: `font-size: 1rem` (16px), inside padding `1rem`, media query for larger screens: `lg:text-lg`. Footer height: `h-16` (4rem).",[12,79,14],"units",{"id":81,"category":82,"question":83,"answer":84,"level":10,"tags":85},11,"Responsive","What is responsive design and what are the basic principles?","**Concept Explanation:** Responsive design ensures web interfaces adapt to different screen sizes and devices, providing optimal usability. Principles: fluid grids, flexible images, media queries, and mobile-first design.\n\n**Internal Behavior:** Browsers render responsive designs by applying media query breakpoints (min-width, max-width). Fluid layouts use relative units. Images scale using `max-width: 100%`. Viewport meta tag controls scaling.\n\n**Syntax Explanation:** Media query: `@media (max-width: 768px) { .nav { flex-direction: column; } }`. Tailwind: `md:flex-row` applies from 768px up.\n\n**CSS Examples:**\n```css\n.container { width: 100%; padding: 1rem; }\n@media (min-width: 640px) {\n  .container { max-width: 640px; margin: auto; }\n}\nimg { max-width: 100%; height: auto; }\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"w-full sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto p-4\">\n  \u003Cimg class=\"w-full h-auto\" src=\"...\">\n\u003C\u002Fdiv>\n```\n\n**Practical Examples:** Mobile menu (hidden, appears on desktop). Responsive grid: 1 column on mobile, 3 columns on desktop. Fluid typography: `text-base md:text-lg`.\n\n**Common Mistakes:** Fixed pixel widths causing horizontal scroll; ignoring touch targets; testing only on desktop; using `max-width` without meta viewport.\n\n**Edge Cases:** Landscape orientation, foldable devices, high-DPI screens. `@media (pointer: coarse)` for touch devices.\n\n**Interview Follow-ups:** Explain mobile-first vs desktop-first approach. How do container queries differ? How to handle retina displays? What is the difference between responsive and adaptive?\n\n**Best Practices:** Mobile-first (min-width queries), test on real devices, use relative units, set viewport meta tag: `\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">`.\n\n**Responsive Considerations:** Use breakpoints based on content, not devices. Tailwind defaults: sm:640px, md:768px, lg:1024px, xl:1280px.\n\n**Accessibility:** Allow zoom without horizontal overflow; avoid `user-scalable=no`. Ensure font sizes scale.\n\n**Performance Optimization:** Load appropriately sized images using `srcset`. Lazy load below-the-fold content. Avoid render-blocking CSS.\n\n**Production Recommendations:** Use Tailwind’s responsive variants extensively. For complex layouts, combine grid and flex. Use CSS custom properties for theme-based breakpoints.\n\n**Latest Tailwind Patterns:** Container queries via `@tailwindcss\u002Fcontainer-queries` with `@sm:`, `@md:` prefixes. Using `max-*:` variants for max-width breakpoints.\n\n**Interview Tip:** Stress that responsive design is about content and user experience, not just device sizes.\n\n**Common Follow-up:** What is the `srcset` attribute? How do you handle responsive images in CSS background?\n\n**Real-world Example:** A blog layout: on mobile `flex-col`, on desktop `flex-row`. Sidebar hidden on mobile, shown on desktop with `hidden md:block`. Images use `object-cover` for cropping.",[86,12,14],"responsive",{"id":88,"category":89,"question":90,"answer":91,"level":10,"tags":92},12,"Media Queries","Explain media queries and how to write them in CSS and Tailwind.","**Concept Explanation:** Media queries apply CSS rules based on device characteristics like width, height, orientation, resolution. They are cornerstone of responsive design.\n\n**Internal Behavior:** Browser evaluates media conditions and applies styles within matching queries. Queries are evaluated during render; dynamic changes (resize) re-evaluate. Order matters: later rules override earlier if specificity equal.\n\n**Syntax Explanation:** `@media media-type and (feature: value) { ... }`. Example: `@media screen and (min-width: 768px) { ... }`. Features include `max-width`, `orientation`, `hover`, `prefers-color-scheme`.\n\n**CSS Examples:**\n```css\n\u002F* Mobile first *\u002F\n.card { display: block; }\n@media (min-width: 768px) {\n  .card { display: flex; }\n}\n\u002F* Dark mode *\u002F\n@media (prefers-color-scheme: dark) {\n  body { background: black; }\n}\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"block md:flex dark:bg-gray-800\">\n  \u003C!-- responsive & dark mode -->\n\u003C\u002Fdiv>\n```\nTailwind uses `sm:`, `md:`, `lg:`, `xl:`, `2xl:` variants. For custom: `max-md:flex-col` (Tailwind v3.2+).\n\n**Practical Examples:** Hiding elements on print: `@media print { .no-print { display: none; } }`. Changing layout on landscape: `@media (orientation: landscape)`.\n\n**Common Mistakes:** Writing overlapping queries incorrectly, non-mobile-first causing extra CSS, forgetting that media queries do not increase specificity.\n\n**Edge Cases:** `min-width` and `max-width` pixel rounding issues. `hover` media query: `@media (hover: hover)` for devices that support hover.\n\n**Interview Follow-ups:** How do you test media queries in dev tools? What is `resolution` query? How to combine multiple conditions (and, not, only)?\n\n**Best Practices:** Use mobile-first approach (min-width), group media queries at bottom or use a separate CSS file, avoid too many breakpoints.\n\n**Responsive Considerations:** Tailwind’s breakpoints are pixel-based; you can customize via `tailwind.config.js` to use ems for better zoom support.\n\n**Accessibility:** Respect `prefers-reduced-motion` by reducing animations. Support `prefers-contrast` for high contrast needs.\n\n**Performance Optimization:** Avoid putting large amounts of CSS inside media queries that are rarely triggered; still parsed. Use `content-visibility` for off-screen sections.\n\n**Production Recommendations:** Use Tailwind's responsive utilities over custom CSS media queries for consistency. For complex logic, write custom queries.\n\n**Latest Tailwind Patterns:** Arbitrary media queries: `max-[600px]:text-center`. `min-[1200px]:grid-cols-4`. Support for container queries plugin.\n\n**Interview Tip:** Demonstrate dynamic resizing behavior and how to debug with dev tools device toolbar.\n\n**Common Follow-up:** What is the difference between `min-width` and `max-width`? Which is better for mobile-first?\n\n**Real-world Example:** In Tailwind: a card grid that shows 1 column on phone, 2 on tablet, 4 on desktop: `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`.",[12,93,86,14],"media-queries",{"id":95,"category":96,"question":97,"answer":98,"level":10,"tags":99},13,"Pseudo Classes","What are pseudo-classes in CSS and name common ones (hover, focus, nth-child, etc.)?","**Concept Explanation:** Pseudo-classes define special states of elements (e.g., user interaction, structural position) that cannot be targeted by simple selectors. They are prefixed with `:`.\n\n**Internal Behavior:** Browser applies styles when condition matches. Dynamic pseudo-classes (`:hover`, `:focus`) update on user input. Structural (`:nth-child`) computed at render.\n\n**Syntax Explanation:** `selector:pseudo-class { ... }`. Examples: `a:hover`, `input:focus`, `li:first-child`, `div:not(.hidden)`. Tailwind provides variants like `hover:`, `focus:`, `focus-within:`.\n\n**CSS Examples:**\n```css\nbutton:hover { background: darkblue; }\ninput:invalid { border-color: red; }\nli:nth-child(even) { background: #f0f0f0; }\n```\n\n**Tailwind Examples:**\n```html\n\u003Cbutton class=\"bg-blue-500 hover:bg-blue-700 focus:ring-2\">Click\u003C\u002Fbutton>\n\u003Cli class=\"even:bg-gray-100\">Item\u003C\u002Fli>\n```\n\n**Practical Examples:** Form validation styling (`:invalid`, `:required`). Interactive states: active, visited. Table striping using `:nth-child(odd)`. Focus management for keyboard navigation.\n\n**Common Mistakes:** Forgetting `:focus-visible` for keyboard only; applying hover styles to touch devices incorrectly; using `:nth-child` vs `:nth-of-type` wrong.\n\n**Edge Cases:** `:hover` on touch screen triggers on tap, persists until other tap; `:focus` may not work on divs without `tabindex`. `:has()` is now supported (advanced).\n\n**Interview Follow-ups:** Explain the difference between `:focus` and `:focus-visible`. How does `:is()` and `:where()` differ from each other? When does `:empty` match?\n\n**Best Practices:** Use `:focus-visible` for focus styles, not `:focus`. Use `:not()` with care. For touch, use `:active`.\n\n**Responsive Considerations:** `:hover` often meaningless on mobile; consider using `:active` or `:focus` instead.\n\n**Accessibility:** Ensure focus indicators have sufficient contrast. Do not remove `outline` without replacement. `:focus-visible` is standard.\n\n**Performance Optimization:** `:nth-child` selectors can be slower on large DOM trees but generally okay.\n\n**Production Recommendations:** Use Tailwind variants for consistency. For custom pseudo-classes, extend theme in config.\n\n**Latest Tailwind Patterns:** Arbitrary pseudo-class: `[&:nth-child(3)]:text-red-500`. Using `group-focus`, `peer-checked` for complex state styling.\n\n**Interview Tip:** Provide example of `:has()` (parent selector) as future.\n\n**Common Follow-up:** How to target first child inside a specific class? Use `.parent > :first-child`.\n\n**Real-world Example:** Dropdown menu: parent `group` with `group-hover:block` on child. Checkbox styling: `peer-checked:bg-green-500`.",[12,100,14],"pseudo-classes",{"id":102,"category":103,"question":104,"answer":105,"level":10,"tags":106},14,"Pseudo Elements","Explain pseudo-elements (::before, ::after) and their use cases.","**Concept Explanation:** Pseudo-elements style specific parts of an element (e.g., first letter, line, or generate content before\u002Fafter). They use double colon `::` (CSS3). `::before` and `::after` insert virtual elements inside the target.\n\n**Internal Behavior:** `::before`\u002F`::after` become the first\u002Flast child of the element. They require `content` property to render. They are inline by default. They cannot be used on replaced elements (img, input).\n\n**Syntax Explanation:** `selector::before { content: ''; display: block; }`. Content can be string, `attr()`, or `url()`. Tailwind does not directly support pseudo-elements, but use arbitrary variants `before:content-[''] before:absolute`.\n\n**CSS Examples:**\n```css\n.quote::before { content: '\"' }\n.quote::after { content: '\"' }\n.clearfix::after { content: ''; display: table; clear: both; }\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"before:content-['★'] before:text-yellow-500 before:mr-1\">Starred\u003C\u002Fdiv>\n\u003Cdiv class=\"after:content-['→'] after:ml-2\">Link\u003C\u002Fdiv>\n```\n\n**Practical Examples:** Custom list markers, decorative quotes, tooltip arrows, clearfix, input placeholder styling (::placeholder).\n\n**Common Mistakes:** Forgetting `content` property; using pseudo-elements on replaced elements; thinking they are children that can be selected in JavaScript (they are not part of DOM).\n\n**Edge Cases:** Applying `position: absolute` to pseudo-element requires parent `position: relative`. `content: attr(data-tooltip)` useful. `::first-letter` only works on block containers.\n\n**Interview Follow-ups:** Can you animate pseudo-elements? Yes, any animatable property. How to use pseudo-elements with Tailwind? Use arbitrary values. What is `::selection`?\n\n**Best Practices:** Use for decorative content, not essential info (screen readers may read the content, varies). For critical UI, use actual DOM elements.\n\n**Responsive Considerations:** Pseudo-elements follow the element’s responsiveness; can use media queries inside.\n\n**Accessibility:** Screen readers may read `content` text; avoid putting meaningful text there. Use `aria-hidden` if needed.\n\n**Performance Optimization:** Changing `content` triggers repaint, not layout.\n\n**Production Recommendations:** Use Tailwind arbitrary variants sparingly for pseudo-elements; for complex, write CSS.\n\n**Latest Tailwind Patterns:** `before:content-[''] before:absolute before:inset-0 before:bg-black before:opacity-50` for overlays. `file:button` etc.\n\n**Interview Tip:** Demonstrate creating a custom tooltip using `::before` and `::after`.\n\n**Common Follow-up:** How to set `content` from attribute? `content: attr(data-label);`\n\n**Real-world Example:** Breadcrumb separator: `.breadcrumb li:not(:last-child)::after { content: '\u002F'; margin: 0 8px; }`. Tailwind: `[&:not(:last-child)]:after:content-['\u002F'] after:mx-2`.",[12,107,14],"pseudo-elements",{"id":109,"category":110,"question":111,"answer":112,"level":10,"tags":113},15,"Overflow","What is CSS overflow and its values (visible, hidden, scroll, auto)?","**Concept Explanation:** Overflow controls content that exceeds an element's box. Values: `visible` (default, overflows out), `hidden` (clipped, no scrollbar), `scroll` (always shows scrollbars), `auto` (scrollbars only when needed).\n\n**Internal Behavior:** `overflow: hidden` creates a block formatting context (BFC) and clips content to the box. `overflow: scroll` reserves space for scrollbars even when not needed, affecting layout width. `auto` is preferred for dynamic.\n\n**Syntax Explanation:** `overflow-x`, `overflow-y` control separately. Tailwind: `overflow-auto`, `overflow-hidden`, `overflow-scroll`, `overflow-visible`. Also `overflow-x-auto` etc.\n\n**CSS Examples:**\n```css\n.card { overflow: auto; max-height: 200px; }\n.modal { overflow-y: auto; overscroll-behavior: contain; }\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"overflow-auto max-h-64\">Long content...\u003C\u002Fdiv>\n\u003Cdiv class=\"overflow-hidden whitespace-nowrap text-ellipsis\">Truncated text\u003C\u002Fdiv>\n```\n\n**Practical Examples:** Scrollable chat window, dropdown menus with max-height, truncating text (`text-ellipsis`), preventing margin collapse (using `overflow: auto`).\n\n**Common Mistakes:** Using `overflow: hidden` on body disabling scroll; not testing scrollbar width differences across browsers; `overflow: visible` causing layout shifts.\n\n**Edge Cases:** `overflow: hidden` on parent with absolute children can clip them; `overflow: clip` vs `hidden` (clip disables programmatic scrolling).\n\n**Interview Follow-ups:** How does overflow affect containing block for absolute elements? What is the difference between `overflow: clip` and `overflow: hidden`? Explain `overscroll-behavior`.\n\n**Best Practices:** Use `overflow: auto` for scrollable areas. For text truncation, combine `overflow-hidden text-ellipsis whitespace-nowrap`.\n\n**Responsive Considerations:** On mobile, ensure scrollable areas have enough touch target; use `-webkit-overflow-scrolling: touch` for smooth scroll.\n\n**Accessibility:** Ensure focusable elements are not cut off in overflow hidden containers. Provide keyboard scrollability (via tab and arrow keys).\n\n**Performance Optimization:** Scrollable regions with large content cause repaints on scroll; use `will-change: transform` if needed.\n\n**Production Recommendations:** Set `overflow: auto` for dynamic content like modals. Use `overscroll-behavior: contain` for nested scroll to prevent body scroll.\n\n**Latest Tailwind Patterns:** `overflow-y-auto` for chat-like windows. `scrollbar-hide` (plugin) to hide scrollbars while keeping functionality.\n\n**Interview Tip:** Show how `overflow: hidden` can clear floats by establishing BFC.\n\n**Common Follow-up:** How do you make an element scrollable but hide scrollbar? Use `scrollbar-width: none` and `::-webkit-scrollbar { display: none; }`.\n\n**Real-world Example:** Card with description text: `line-clamp-3 overflow-hidden` (Tailwind plugin). Sidebar navigation: `overflow-y-auto h-screen`.",[12,114,14],"overflow",{"id":116,"category":117,"question":118,"answer":119,"level":10,"tags":120},16,"Layering","Explain z-index and stacking context.","**Concept Explanation:** `z-index` controls the stack order of positioned elements (non-static). Elements with higher z-index appear in front. However, stacking contexts create local hierarchies.\n\n**Internal Behavior:** Each stacking context contains its own stack. New stacking context formed by: `position: relative\u002Fabsolute\u002Ffixed` with `z-index` not `auto`, `opacity \u003C 1`, `transform`, `filter`, `will-change`, etc. Inside a context, children are layered relative to each other.\n\n**Syntax Explanation:** `z-index: 10;` requires `position: relative`, `absolute`, `fixed`, or `sticky`. Tailwind: `z-10`, `z-50`, `z-auto`. Default is `auto`.\n\n**CSS Examples:**\n```css\n.modal {\n  position: fixed;\n  z-index: 1000;\n}\n.overlay {\n  position: fixed;\n  z-index: 999;\n}\n\u002F* stacking context *\u002F\n.parent {\n  opacity: 0.99; \u002F* creates context *\u002F\n}\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"relative z-10\">Above\u003C\u002Fdiv>\n\u003Cdiv class=\"relative z-0\">Below\u003C\u002Fdiv>\n\u003Cdiv class=\"fixed inset-0 bg-black bg-opacity-50 z-40\">Overlay\u003C\u002Fdiv>\n```\n\n**Practical Examples:** Modal overlay above all content. Dropdown menu above other elements. Sticky header with lower z-index than tooltips.\n\n**Common Mistakes:** Forgetting to set `position` on element; assuming z-index works globally across stacking contexts; high z-index values like 999999.\n\n**Edge Cases:** `z-index: auto` does not create stacking context (except flex\u002Fgrid children with `z-index` auto?). Actually in flex\u002Fgrid, `z-index: auto` creates context? No, only if value is not auto. SVG elements have different layering.\n\n**Interview Follow-ups:** How to debug z-index issues? How to create a stacking context without positioning? Explain why `transform: translateZ(0)` is used.\n\n**Best Practices:** Keep z-index values in a scale (10,20,30). Use CSS variables. Avoid very high numbers; manage contexts carefully.\n\n**Responsive Considerations:** No direct, but stacking contexts may affect fixed\u002Fsticky overlapping.\n\n**Accessibility:** Ensure high z-index elements (modals) trap focus and are readable by screen readers.\n\n**Performance Optimization:** Creating stacking contexts can improve paint performance because they isolate layer.\n\n**Production Recommendations:** Use Tailwind’s pre-defined z-index scale (z-0 to z-50). For modals, use z-50 (max). Define custom layers if needed.\n\n**Latest Tailwind Patterns:** Combine `z-10` with `isolate` (creates stacking context) to isolate component.\n\n**Interview Tip:** Ask candidate to explain scenario: parent with opacity:0.99 and child with z-index 9999 still behind sibling? Because child's stacking context limited to parent.\n\n**Common Follow-up:** What is the default z-index of position static elements? Auto (behave as if 0 but no context).\n\n**Real-world Example:** Popover within a card: card has `transform: translateY(0)` causing stacking context, popover z-index 100 but still behind other cards – solution: move popover to body portal.",[12,121,122,14],"z-index","stacking",{"id":124,"category":125,"question":126,"answer":127,"level":10,"tags":128},17,"Variables","What are CSS custom properties (CSS variables) and how to use them?","**Concept Explanation:** CSS custom properties (variables) store values for reuse throughout stylesheets. They cascade and can be updated dynamically via JavaScript or media queries.\n\n**Internal Behavior:** Defined using `--variable-name`. Accessed with `var(--variable-name, fallback)`. Browsers resolve variables at computed value time. They inherit naturally; change in parent affects children.\n\n**Syntax Explanation:** `:root { --primary-color: #3490dc; }` then `color: var(--primary-color);`. Tailwind can reference CSS variables in config.\n\n**CSS Examples:**\n```css\n:root { --spacing-unit: 8px; }\n.card { padding: var(--spacing-unit); }\n@media (prefers-color-scheme: dark) {\n  :root { --bg: #1a202c; }\n}\n```\n\n**Tailwind Examples:**\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  :root { --brand: #3b82f6; }\n  .btn { background-color: var(--brand); }\n}\n```\nOr using arbitrary values: `bg-[var(--brand)]`.\n\n**Practical Examples:** Theming (light\u002Fdark), dynamic spacing, consistent color palette, runtime updates (JS toggle).\n\n**Common Mistakes:** Forgetting fallback value; using variables in media queries not supported (cannot define breakpoints directly but can inside).\n\n**Edge Cases:** `var()` with `calc()`: `width: calc(var(--size) * 2)`. Browsers handle gracefully if variable invalid.\n\n**Interview Follow-ups:** Difference between CSS variables and preprocessor variables? How do you update variables with JavaScript? Can you use variables in `@keyframes`? Yes.\n\n**Best Practices:** Define global variables in `:root`. Use descriptive names. Provide fallbacks for older browsers.\n\n**Responsive Considerations:** Update variables inside media queries for responsive theming.\n\n**Accessibility:** Can be used with `prefers-color-scheme` to support user OS preferences.\n\n**Performance Optimization:** Overusing variables can increase style recalculation cost but negligible.\n\n**Production Recommendations:** Use CSS variables for design tokens (colors, spacing, fonts). Pair with Tailwind via extending theme with variable references.\n\n**Latest Tailwind Patterns:** Using CSS variables with arbitrary values: `text-[var(--heading-color)]`. Configuring theme with variables: `colors: { primary: 'var(--primary)' }`.\n\n**Interview Tip:** Show dynamic theme toggle using `document.documentElement.style.setProperty('--primary', '#ff0000')`.\n\n**Common Follow-up:** How do variables inherit? Like any CSS property, they inherit from parent unless overridden.\n\n**Real-world Example:** A component library using `--component-border-radius` that consumers can override without breaking.",[12,129,130,14],"variables","custom-properties",{"id":132,"category":133,"question":134,"answer":135,"level":10,"tags":136},18,"Transitions","Explain CSS transitions and how to create smooth interactions.","**Concept Explanation:** Transitions animate changes in CSS properties over a duration, providing smooth visual feedback between states (e.g., hover).\n\n**Internal Behavior:** When a property changes (e.g., `background-color`), browser interpolates intermediate values based on timing function (`ease`, `linear`). Transition requires initial and final states. Works on properties that have identifiable midpoints (e.g., color, size, opacity).\n\n**Syntax Explanation:** `transition: property duration timing-function delay;`. Shorthand: `transition: all 0.3s ease;`. Tailwind: `transition`, `duration-300`, `ease-in-out`, `delay-100`.\n\n**CSS Examples:**\n```css\n.button {\n  background: blue;\n  transition: background 0.3s ease, transform 0.2s;\n}\n.button:hover {\n  background: darkblue;\n  transform: scale(1.05);\n}\n```\n\n**Tailwind Examples:**\n```html\n\u003Cbutton class=\"bg-blue-500 hover:bg-blue-700 transition duration-300 ease-in-out transform hover:scale-105\">\n  Hover me\n\u003C\u002Fbutton>\n```\n\n**Practical Examples:** Hover effects on cards, slide-in menus, color transitions, form focus rings, accordion height (but limited).\n\n**Common Mistakes:** Transitioning `height: auto` not possible; not setting initial state before state change; overusing `all` causing performance issues; forgetting `will-change`.\n\n**Edge Cases:** `display: none` cannot be transitioned; use `opacity` + `visibility`. Hardware acceleration for `transform` and `opacity`. Transition end event.\n\n**Interview Follow-ups:** Which properties are expensive to transition? `width`, `height` cause layout reflow, prefer `transform`. How to handle transition on page load? Use JS or start with class.\n\n**Best Practices:** Use `transform` and `opacity` for smooth animations. Avoid transitioning `all`. Set explicit `transition-property`.\n\n**Responsive Considerations:** Reduce motion preference via `@media (prefers-reduced-motion)` to disable transitions.\n\n**Accessibility:** Respect `prefers-reduced-motion` by removing or reducing transitions for vestibular disorders.\n\n**Performance Optimization:** Use `will-change: transform` before animating. Limit number of simultaneously transitioning elements.\n\n**Production Recommendations:** Prefer Tailwind transition utilities for consistency. Use `motion-safe:` and `motion-reduce:` variants for accessibility.\n\n**Latest Tailwind Patterns:** `transition-all` is common but consider performance. Tailwind v3 has `transition` (all), `transition-colors`, `transition-opacity`, etc.\n\n**Interview Tip:** Demonstrate transition with and without hardware acceleration.\n\n**Common Follow-up:** How to transition height from 0 to auto? Use `max-height` hack or CSS Grid `grid-template-rows: 0fr to 1fr`.\n\n**Real-world Example:** A dropdown menu sliding: `transition transform duration-200` with `scale-y-0` to `scale-y-100` origin-top.",[12,137,14],"transitions",{"id":139,"category":140,"question":141,"answer":142,"level":10,"tags":143},19,"Animations","What are CSS animations and how do they differ from transitions?","**Concept Explanation:** CSS animations use `@keyframes` to define complex, multi-step animations. They can loop, reverse, and offer finer control than transitions (which only interpolate between two states).\n\n**Internal Behavior:** Browser creates animation timeline, applies keyframes percentages or from\u002Fto. Properties like `animation-name`, `duration`, `iteration-count`, `direction`. Animations run automatically on load or class addition.\n\n**Syntax Explanation:** Define `@keyframes slideIn { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }`. Then `animation: slideIn 0.5s ease-in-out forwards;`. Tailwind includes utilities for common animations via plugin or custom.\n\n**CSS Examples:**\n```css\n@keyframes pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.5; }\n}\n.loader {\n  animation: pulse 1.5s infinite;\n}\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"animate-spin rounded-full h-4 w-4 border-b-2\">\u003C\u002Fdiv>\n\u003Cdiv class=\"animate-pulse bg-blue-500\">Pulsing\u003C\u002Fdiv>\n\u003C!-- custom animation via tailwind.config extend keyframes -->\n```\n\n**Practical Examples:** Loading spinners, skeleton screens, entrance animations, carousel slides, bouncing icons.\n\n**Common Mistakes:** Not setting `animation-fill-mode: forwards` when final state needed; causing repaints by animating layout properties (`width`, `top`).\n\n**Edge Cases:** Animations on elements with `display: none` won't run. Multiple animations on same element comma-separated. `infinite` loops consume CPU.\n\n**Interview Follow-ups:** What is the difference between transition and animation? When would you use one over the other? Explain `animation-play-state`.\n\n**Best Practices:** Animate `transform` and `opacity`. Use `will-change` for long-running animations. Provide reduced motion alternative.\n\n**Responsive Considerations:** Disable complex animations on small screens or low battery (via media queries).\n\n**Accessibility:** Use `prefers-reduced-motion: reduce` to disable or simplify animations.\n\n**Performance Optimization:** Keep animations on compositor layers (transform\u002Fopacity). Avoid animating layout properties.\n\n**Production Recommendations:** Use Tailwind's pre-defined animations (`animate-spin`, `animate-pulse`, `animate-bounce`) for simple cases. Extend config for custom ones.\n\n**Latest Tailwind Patterns:** Tailwind v3 includes `animate-none`. Custom keyframes via `theme.extend.keyframes`. Also `animation-delay` utilities via `delay-*`.\n\n**Interview Tip:** Explain that transitions are for state changes (hover, focus), animations for independent loops or entrance sequences.\n\n**Common Follow-up:** How to stop animation on hover? `animation-play-state: paused`. Tailwind: `hover:animation-pause` requires custom.\n\n**Real-world Example:** A skeleton loading card: `animate-pulse bg-gray-300 rounded`.",[12,144,14],"animations",{"id":146,"category":147,"question":148,"answer":149,"level":10,"tags":150},20,"Tailwind","What is Tailwind CSS and what problems does it solve?","**Concept Explanation:** Tailwind CSS is a utility-first framework that provides low-level classes (e.g., `flex`, `pt-4`, `text-center`) to build custom designs directly in markup, rather than writing custom CSS.\n\n**Internal Behavior:** Tailwind scans your HTML\u002FJS files for class names using the `content` configuration, then generates only the used styles. The Just-In-Time (JIT) engine enables on-demand styles and arbitrary values.\n\n**Syntax Explanation:** Instead of `.btn { background: blue; }`, use `\u003Cbutton class=\"bg-blue-500 text-white px-4 py-2 rounded\">`. Variants like `hover:bg-blue-700` and `md:w-1\u002F2`.\n\n**CSS Examples (comparison):**\n```css\n\u002F* Traditional CSS *\u002F\n.card { background: white; border-radius: 8px; padding: 1rem; }\n```\n```html\n\u003C!-- Tailwind -->\n\u003Cdiv class=\"bg-white rounded-lg p-4\">\u003C\u002Fdiv>\n```\n\n**Tailwind Examples:** Comprehensive example: `\u003Cdiv class=\"max-w-sm mx-auto bg-white shadow-md rounded-md overflow-hidden md:max-w-md\">`.\n\n**Practical Examples:** Building a button: `bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded`. Responsive navbar: `flex flex-wrap justify-between items-center`.\n\n**Common Mistakes:** Writing too many classes making markup messy; forgetting to configure `content` causing missing styles; overriding default spacing scale unnecessarily.\n\n**Edge Cases:** Class name conflicts with user CSS; arbitrary values not working without proper JIT; dynamic classes using string concatenation may be purged.\n\n**Interview Follow-ups:** Compare utility-first with semantic CSS. How does Tailwind’s JIT mode work? Explain purging. What are the tradeoffs?\n\n**Best Practices:** Use `@apply` sparingly for component extraction. Keep `tailwind.config.js` organized. Use `clsx` or `cn` for conditional classes.\n\n**Responsive Considerations:** Use responsive prefixes (sm:, md:, lg:) directly, reducing media query clutter.\n\n**Accessibility:** Tailwind provides `sr-only` for screen readers, `focus:ring` for focus indicators.\n\n**Performance Optimization:** Tailwind purges unused styles; minimal CSS output (often \u003C10KB gzipped). Enable JIT for faster builds.\n\n**Production Recommendations:** Set `purge` correctly; use `minify`; consider `@tailwindcss\u002Fforms`, `typography` plugins.\n\n**Latest Tailwind Patterns:** Using arbitrary variants like `[&_p]:mt-2`, container queries plugin, `group-*` and `peer-*`.\n\n**Interview Tip:** Emphasize speed of development, consistency, and design constraints as benefits.\n\n**Common Follow-up:** How to handle dynamic class names in frameworks like React? Use complete class names or `clsx`.\n\n**Real-world Example:** A card component in React: `\u003Cdiv className=\"bg-white rounded-lg shadow p-4 hover:shadow-lg transition\">`.",[14,12,151],"utility-first",{"id":153,"category":147,"question":154,"answer":155,"level":10,"tags":156},21,"Why choose Tailwind CSS over traditional CSS frameworks like Bootstrap?","**Concept Explanation:** Tailwind differs by not providing pre-designed components. It offers utility classes for styling, giving complete control without overriding opinionated styles. Traditional frameworks provide components (buttons, navbars) with fixed look that require heavy customization.\n\n**Internal Behavior:** Tailwind composes designs using single-purpose classes; Bootstrap uses component classes (`.btn-primary`) with specific styling via CSS. Tailwind results in smaller CSS (purge unused), while Bootstrap includes all components by default.\n\n**Syntax Explanation:** Bootstrap: `\u003Cbutton class=\"btn btn-primary\">`. Tailwind: `\u003Cbutton class=\"bg-blue-500 text-white px-4 py-2 rounded\">`. Tailwind requires more classes but no override fights.\n\n**CSS Examples (Bootstrap vs Tailwind):** Bootstrap default button: `background-color: #0d6efd;` overriding needs higher specificity. Tailwind: you own every style directly.\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"flex flex-col md:flex-row gap-4\">\n  \u003Cdiv class=\"w-full md:w-1\u002F2 p-4 shadow\">Custom\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n**Practical Examples:** Custom design system: Tailwind allows exact spacing, colors, and breakpoints aligned to brand. Bootstrap would require extensive variable overrides.\n\n**Common Mistakes:** Assuming Tailwind ships with ready-made components (it doesn't, but ecosystem provides Headless UI). Thinking Tailwind is slower to prototype – once familiar, it's faster.\n\n**Edge Cases:** Team unfamiliar with utility classes may create chaos. In large codebases, maintain class string length. Over-customization removes benefits.\n\n**Interview Follow-ups:** When would you choose Bootstrap over Tailwind? For rapid admin panels with minimal custom design. How does Tailwind reduce CSS bloat? Purging unused.\n\n**Best Practices:** For design-heavy unique interfaces, Tailwind excels. For standard UI with little customization, Bootstrap faster.\n\n**Responsive Considerations:** Tailwind's responsive utilities are compact; Bootstrap uses mixins or separate classes.\n\n**Accessibility:** Both can be made accessible; Tailwind provides better control.\n\n**Performance Optimization:** Tailwind's smaller CSS bundle improves load time, especially on slow networks.\n\n**Production Recommendations:** Use Tailwind for bespoke SaaS products. Use Bootstrap for internal tools.\n\n**Latest Tailwind Patterns:** Tailwind 3 JIT, arbitrary values, and plugins (forms, typography).\n\n**Interview Tip:** Discuss the concept of CSS specificity and how Tailwind avoids cascading conflicts.\n\n**Common Follow-up:** Can you use Tailwind with Bootstrap? Yes, but collisions; better to choose one.\n\n**Real-world Example:** A startup building a design system: Tailwind enables rapid iteration while maintaining consistent design tokens.",[14,157,158],"css-frameworks","comparison",{"id":160,"category":147,"question":161,"answer":162,"level":10,"tags":163},22,"Explain utility-first CSS and its advantages over semantic CSS.","**Concept Explanation:** Utility-first CSS means building interfaces using small, single-purpose classes (`margin-top`, `padding`, `text-center`) directly in HTML, rather than writing custom CSS for each component. Semantic CSS advocates descriptive class names (`.card`).\n\n**Internal Behavior:** With utility-first, styles are tightly coupled to HTML; no context switching. Changes affect only that instance. Semantic CSS encourages reusable components but leads to CSS bloat and specificity wars.\n\n**Syntax Explanation:** Utility: `\u003Cdiv class=\"p-4 bg-white rounded shadow\">`. Semantic: `\u003Cdiv class=\"card\">` and CSS `.card { padding: 1rem; background: white; border-radius; ... }`.\n\n**CSS Examples:**\n```css\n\u002F* Semantic *\u002F\n.alert-error { background: red; color: white; padding: 1rem; }\n```\n```html\n\u003C!-- Utility -->\n\u003Cdiv class=\"bg-red-500 text-white p-4\">Error\u003C\u002Fdiv>\n```\n\n**Tailwind Examples:** List of utilities: `flex`, `justify-center`, `items-center`, `space-x-2`.\n\n**Practical Examples:** Building a hover card: no need to create `.card:hover`; use `hover:shadow-lg` directly.\n\n**Common Mistakes:** Creating long unreadable class strings; not extracting repeated patterns; thinking it's not maintainable.\n\n**Edge Cases:** Dynamic conditional classes become messy without helpers (e.g., `clsx`).\n\n**Interview Follow-ups:** How do you handle component reuse in utility-first? Using component frameworks (React, Vue) or `@apply`. Is utility-first slower to develop? Initially, but faster long-term.\n\n**Best Practices:** Use component composition in JS frameworks; extract repeated utilities with `@apply` only for high-level components; keep design system tokens.\n\n**Responsive Considerations:** Utilities include responsive variants, making media queries unnecessary.\n\n**Accessibility:** No direct impact, but easier to add `focus:ring` individually.\n\n**Performance Optimization:** Smaller CSS size due to purging; no dead code.\n\n**Production Recommendations:** Adopt Tailwind for new projects; for existing large CSS codebases, gradually migrate.\n\n**Latest Tailwind Patterns:** `@layer components` for component extraction. Using `@config`.\n\n**Interview Tip:** Argue that utility-first solves the problem of growing CSS and encourages consistency.\n\n**Common Follow-up:** What about the argument that utility-first violates separation of concerns? Separation is about HTML, CSS, JavaScript – but many modern architectures couple markup and style intentionally.\n\n**Real-world Example:** Twitter’s new design uses utility-first similar to Tailwind; they built their own framework.",[14,151,164],"css-architecture",{"id":166,"category":147,"question":167,"answer":168,"level":10,"tags":169},23,"How do you install and set up Tailwind CSS in a project?","**Concept Explanation:** Tailwind can be installed via npm as a PostCSS plugin, or via CDN (not recommended for production). Typical setup includes installing Tailwind, configuring `tailwind.config.js`, and adding directives to CSS.\n\n**Internal Behavior:** Tailwind uses PostCSS to process your CSS, scanning your templates for classes and generating optimized output. The JIT engine watches for changes and rebuilds on the fly.\n\n**Syntax Explanation:** Steps: 1. `npm install -D tailwindcss postcss autoprefixer`. 2. `npx tailwindcss init`. 3. Configure `content` paths in `tailwind.config.js`. 4. Add `@tailwind base; @tailwind components; @tailwind utilities;` to main CSS. 5. Build: `npx tailwindcss -i input.css -o output.css --watch`.\n\n**CSS Examples:** `input.css`:\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n**Tailwind Examples:** In HTML: `\u003Clink href=\"\u002Foutput.css\" rel=\"stylesheet\">`.\n\n**Practical Examples:** Integration with frameworks: Next.js (postcss.config.js), Vite, Laravel Mix, etc.\n\n**Common Mistakes:** Forgetting `content` paths causing missing classes; not running build process; using CDN for production (no purge, huge file).\n\n**Edge Cases:** Content paths must include all source files (JS, Vue, JSX). Dynamic class names e.g., `text-${color}` may be purged – use safelist or complete names.\n\n**Interview Follow-ups:** What is the role of PostCSS? How do you set up Tailwind with Create React App? (Need to override CRA postcss or use CRACO).\n\n**Best Practices:** Use `tailwind.config.js` to extend theme. Set up PurgeCSS (built-in content). Use `@tailwind` directives.\n\n**Responsive Considerations:** No extra steps.\n\n**Accessibility:** No impact.\n\n**Performance Optimization:** In production, Tailwind purges unused CSS. Enable JIT for development speed.\n\n**Production Recommendations:** Minify output. Use CSSNano. Ensure `NODE_ENV=production`.\n\n**Latest Tailwind Patterns:** Tailwind v3 JIT is default; no separate PurgeCSS config needed. Use `@config` to point to different config file.\n\n**Interview Tip:** Be prepared to explain PostCSS plugin architecture.\n\n**Common Follow-up:** How to set up Tailwind in a monorepo? Use shared config.\n\n**Real-world Example:** In a Laravel project: `npm install -D tailwindcss`, `npx tailwindcss init`, then run `npm run dev` with Laravel Mix configured.",[14,170,171],"installation","setup",{"id":173,"category":147,"question":174,"answer":175,"level":10,"tags":176},24,"Explain the basics of tailwind.config.js file.","**Concept Explanation:** `tailwind.config.js` is the configuration file where you customize Tailwind’s theme (colors, spacing, breakpoints), plugins, variants, and purge\u002Fcontent paths.\n\n**Internal Behavior:** Tailwind reads this config to generate utilities. It merges your customizations with the default theme. The `content` array tells Tailwind which files to scan for class names.\n\n**Syntax Explanation:**\n```js\nmodule.exports = {\n  content: [\".\u002Fsrc\u002F**\u002F*.{html,js}\"],\n  theme: {\n    extend: {\n      colors: { brand: '#ff5733' },\n      spacing: { 128: '32rem' }\n    }\n  },\n  plugins: []\n}\n```\n\n**CSS Examples:** Use custom color: `bg-brand`.\n\n**Tailwind Examples:** Adding custom font: `theme.extend.fontFamily { sans: ['Inter', ...] }`.\n\n**Practical Examples:** Changing primary color, adding new breakpoint (`xs: '480px'`), disabling core plugins.\n\n**Common Mistakes:** Mutating theme directly instead of using `extend`; forgetting to restart dev server; not setting content paths leading to missing classes.\n\n**Edge Cases:** Using `safelist` to prevent purging of dynamically generated classes.\n\n**Interview Follow-ups:** What is the purpose of `extend` vs replacing theme? How to add custom variants? What is `corePlugins`?\n\n**Best Practices:** Keep config minimal; use `extend` for brand customizations; organize by concerns.\n\n**Responsive Considerations:** Add custom breakpoints via `theme.screens` (use `max-width` via `max-` modifiers).\n\n**Accessibility:** No direct.\n\n**Performance Optimization:** Fine-tune `content` globs to avoid unnecessary scanning; use `safelist` for dynamic classes.\n\n**Production Recommendations:** Use environment-specific config (e.g., disable unused variants).\n\n**Latest Tailwind Patterns:** Tailwind v3 config supports `presets` for sharing config. JIT enabled by default, no `purge` option, use `content`.\n\n**Interview Tip:** Show example of adding custom keyframes and animation.\n\n**Common Follow-up:** How to share config across multiple projects? Create npm package with preset.\n\n**Real-world Example:** Multi-brand app: config exports different color schemes based on environment variable.",[14,177,178],"configuration","tailwind-config",{"id":180,"category":147,"question":181,"answer":182,"level":10,"tags":183},25,"How do Tailwind spacing utilities work and how to customize them?","**Concept Explanation:** Tailwind provides a spacing scale from `0` to `96` (in rems by default) for margin, padding, gap, width, height, etc. Utilities like `p-4` = 1rem (16px). The scale is based on a default spacing ratio (0.25rem increments).\n\n**Internal Behavior:** Tailwind generates classes like `.m-1 { margin: 0.25rem; }`, `.p-2 { padding: 0.5rem; }` up to `.p-96`. Uses rem units for accessibility. Negative margins available (`-m-4`).\n\n**Syntax Explanation:** `p-{size}` for padding on all sides; `px-{size}` (x-axis), `py-{size}` (y-axis), `pt-`, `pb-`, `pl-`, `pr-`. Similar for margin (`m-`, `mx-`, etc.) and gap (`gap-4`).\n\n**CSS Examples:** `.p-4` equals `padding: 1rem;`. Arbitrary value: `p-[32px]`.\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"p-6 md:p-8 mx-auto max-w-7xl\">\n  \u003Cdiv class=\"space-y-4\">...\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n**Practical Examples:** Creating consistent spacing between components: use `mb-4` for bottom margin. Card inner padding: `p-5`.\n\n**Common Mistakes:** Not understanding that `p-4` is 1rem, not 4px. Overusing arbitrary values, breaking consistency.\n\n**Edge Cases:** Customizing spacing scale may break third-party components. Negative margin works only for margin utilities.\n\n**Interview Follow-ups:** What units does Tailwind spacing use? rem. How to change base unit? Modify `theme.spacing`.\n\n**Best Practices:** Stick to default spacing scale unless design system demands otherwise. Use `gap` instead of margins for flex\u002Fgrid children.\n\n**Responsive Considerations:** Responsive spacing: `sm:p-2 md:p-6`.\n\n**Accessibility:** Using rem respects user font-size settings.\n\n**Performance Optimization:** No impact.\n\n**Production Recommendations:** Override spacing via config: `theme.extend.spacing { '128': '32rem' }`. Use `p-[clamp(1rem,5vw,3rem)]` for fluid spacing.\n\n**Latest Tailwind Patterns:** Arbitrary spacing: `p-[5%]`, `m-[calc(100%-2rem)]`. Space utilities: `space-y-2` for vertical gap between children.\n\n**Interview Tip:** Understand the difference between margin and gap in layout.\n\n**Common Follow-up:** How to create responsive gutters in grid? Use `gap-4 md:gap-8`.\n\n**Real-world Example:** A product card: `p-4`, `mb-6`, flex `gap-2` between image and text.",[14,184,185],"spacing","utilities",{"id":187,"category":147,"question":188,"answer":189,"level":10,"tags":190},26,"How does Tailwind handle colors and what are best practices?","**Concept Explanation:** Tailwind provides a comprehensive color palette (50 to 900 shades) out of the box: red, blue, green, gray, etc. Each color has utilities for text, background, border (`text-red-500`, `bg-blue-200`, `border-gray-300`).\n\n**Internal Behavior:** Colors are generated from default palette. You can extend or override. Opacity modifiers like `bg-black\u002F50` use CSS color-mix or `rgba`.\n\n**Syntax Explanation:** `text-{color}-{shade}`, `bg-{color}-{shade}`, `border-{color}-{shade}`. Also `from-{color}` for gradients. Opacity: `text-white\u002F75`.\n\n**CSS Examples:** `.text-red-500 { color: #ef4444; }`. Arbitrary: `text-[#123456]`.\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"bg-gradient-to-r from-blue-500 to-purple-600 text-white\">\n  \u003Cbutton class=\"bg-green-600 hover:bg-green-700\">Click\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n```\n\n**Practical Examples:** Theming: Define primary color as `blue-600` in config. Dark mode: `dark:bg-gray-800`.\n\n**Common Mistakes:** Hardcoding color hex values instead of using config; not using opacity modifiers; ignoring contrast accessibility.\n\n**Edge Cases:** Tailwind uses `border-opacity` utilities but v3 recommends `border-color\u002Fopacity` syntax.\n\n**Interview Follow-ups:** How do you create a custom color palette? Extend `theme.colors`. How to generate shades? Use CSS variables or external plugin.\n\n**Best Practices:** Define semantic colors in config (`primary`, `secondary`) to maintain abstraction. Use opacity for overlays.\n\n**Responsive Considerations:** N\u002FA.\n\n**Accessibility:** Ensure sufficient contrast between text and background; use tools like `@tailwindcss\u002Fcontrast`. Provide dark mode.\n\n**Performance Optimization:** No direct.\n\n**Production Recommendations:** Limit custom colors to reduce CSS size. Use CSS variables for dynamic theming.\n\n**Latest Tailwind Patterns:** Arbitrary colors with opacity: `bg-[#123456]\u002F80`. Using `color-mix` via config.\n\n**Interview Tip:** Understand how to test color contrast.\n\n**Common Follow-up:** How to add a color that works with hover? `hover:bg-primary` requires custom variant.\n\n**Real-world Example:** Brand button: `bg-brand-500 hover:bg-brand-600 text-white`, where brand is defined in config.",[14,191,192],"colors","theming",{"id":194,"category":147,"question":195,"answer":196,"level":10,"tags":197},27,"Explain Tailwind typography utilities and the Typography plugin.","**Concept Explanation:** Tailwind provides font size, weight, line height, letter spacing, and alignment utilities. The official Typography plugin (`@tailwindcss\u002Ftypography`) adds a `prose` class for styling rich text content (like blog posts) with sensible defaults.\n\n**Internal Behavior:** Font size utilities like `text-sm`, `text-lg` map to `font-size` and default line-height. Typography plugin generates a set of classes (`.prose`) that style headings, lists, links, tables, blockquotes within a container.\n\n**Syntax Explanation:** `text-{size}` (xs, sm, base, lg, xl, 2xl, etc.), `font-{weight}` (thin, light, normal, medium, semibold, bold, extrabold), `leading-{tighter|tight|normal|relaxed|loose}`, `tracking-{tighter|tight|normal|wide|wider|widest}`.\n\n**CSS Examples:**\n```css\n.prose { max-width: 65ch; color: #374151; }\n.prose h1 { font-size: 2.25rem; }\n```\n\n**Tailwind Examples:**\n```html\n\u003Carticle class=\"prose prose-lg prose-blue dark:prose-invert\">\n  \u003Ch1>Blog Title\u003C\u002Fh1>\n  \u003Cp>Content...\u003C\u002Fp>\n\u003C\u002Farticle>\n```\n\n**Practical Examples:** Markdown rendered content, blog posts, documentation pages.\n\n**Common Mistakes:** Forgetting to install and include plugin; overriding prose styles with higher specificity; not using `prose-invert` for dark mode.\n\n**Edge Cases:** Prose styles may conflict with custom global styles.\n\n**Interview Follow-ups:** How to customize prose modifiers? Extend `theme.typography` in config. Can you use prose without plugin? Manually style.\n\n**Best Practices:** Use prose for any long-form content. Combine with responsive text sizes: `prose md:prose-lg`.\n\n**Responsive Considerations:** Typography plugin provides responsive modifiers.\n\n**Accessibility:** Ensure line height sufficient, contrast for links.\n\n**Performance Optimization:** Plugin adds minimal CSS.\n\n**Production Recommendations:** Install `@tailwindcss\u002Ftypography`. Customize via `tailwind.config.js` `theme.typography`.\n\n**Latest Tailwind Patterns:** `prose-headings:font-bold`, `prose-a:text-primary` for fine-grained overrides.\n\n**Interview Tip:** Mention that typography plugin uses `@tailwindcss\u002Ftypography` and is officially maintained.\n\n**Common Follow-up:** How to add custom font families? Extend `theme.fontFamily`.\n\n**Real-world Example:** A company blog: `prose prose-slate max-w-none` to remove max-width, with custom link color: `prose-a:text-blue-600`.",[14,198,199],"typography","plugin",{"id":201,"category":147,"question":202,"answer":203,"level":10,"tags":204},28,"How do responsive utilities work in Tailwind?","**Concept Explanation:** Tailwind provides responsive prefixes (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`) that apply styles at specific min-width breakpoints. This enables mobile-first responsive design without writing media queries.\n\n**Internal Behavior:** Tailwind generates media query versions for each utility. For example, `md:flex` compiles to `@media (min-width: 768px) { .md\\:flex { display: flex; } }`. Breakpoints are defined in `theme.screens`.\n\n**Syntax Explanation:** `\u003Cutility class with prefix>` e.g., `text-center md:text-left`. Combine multiple: `block md:flex lg:grid`.\n\n**CSS Examples:**\n```css\n@media (min-width: 768px) {\n  .md\\:text-left { text-align: left; }\n}\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"w-full md:w-1\u002F2 lg:w-1\u002F3\">Responsive width\u003C\u002Fdiv>\n\u003Cnav class=\"flex-col md:flex-row\">...\u003C\u002Fnav>\n```\n\n**Practical Examples:** Mobile menu: `hidden md:block`. Grid: `grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`.\n\n**Common Mistakes:** Forgetting that `md:` applies from 768px up, not between; not providing base styles for mobile; assuming desktop-first.\n\n**Edge Cases:** Custom breakpoints via `max-` modifiers (Tailwind v3.2+): `max-md:flex-col`. Overlapping breakpoints.\n\n**Interview Follow-ups:** How to change default breakpoints? Modify `theme.screens`. How to add custom variant like `xs:`? Extend screens. What is the difference between `min-w` and default responsive?\n\n**Best Practices:** Adopt mobile-first (start with base, add larger breakpoints). Use `container` utility with responsive padding.\n\n**Responsive Considerations:** Use responsive spacing, typography, visibility.\n\n**Accessibility:** Avoid hiding content essential for mobile users without providing alternative.\n\n**Performance Optimization:** Responsive utilities increase CSS size but purging removes unused.\n\n**Production Recommendations:** Customize breakpoints based on your content, not devices.\n\n**Latest Tailwind Patterns:** `max-*` variants for desktop-first overrides. Container queries via plugin: `@sm:flex`.\n\n**Interview Tip:** Demonstrate building a responsive card that changes from stacked to horizontal at `md`.\n\n**Common Follow-up:** How to target a specific range like 768px to 1024px? Use `md:flex` and `lg:flex` but no exclusive range; use `max-lg:...` for below.\n\n**Real-world Example:** Responsive pricing table: on mobile `grid-cols-1`, tablet `grid-cols-2`, desktop `grid-cols-3`.",[14,86,205],"breakpoints",{"id":207,"category":147,"question":208,"answer":209,"level":10,"tags":210},29,"What Flexbox utilities does Tailwind provide?","**Concept Explanation:** Tailwind includes utilities for all standard Flexbox properties: `flex` (display: flex), `flex-direction`, `justify-content`, `align-items`, `flex-wrap`, `flex-grow\u002Fshrink`, `order`, and gap.\n\n**Internal Behavior:** Each utility maps directly to a CSS property. For example `flex-row` => `flex-direction: row`, `justify-between` => `justify-content: space-between`. Supports responsive variants.\n\n**Syntax Explanation:** `flex`, `flex-col`, `flex-row-reverse`, `justify-start\u002Fcenter\u002Fend\u002Fbetween\u002Faround\u002Fevenly`, `items-start\u002Fcenter\u002Fend\u002Fstretch\u002Fbaseline`, `flex-wrap`, `flex-nowrap`, `flex-1` (flex: 1 1 0%), `flex-grow`, `flex-shrink-0`, `order-1`.\n\n**CSS Examples:**\n```css\n.flex { display: flex; }\n.flex-col { flex-direction: column; }\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"flex flex-wrap justify-center items-center gap-4\">\n  \u003Cdiv class=\"flex-1\">Item\u003C\u002Fdiv>\n  \u003Cdiv class=\"flex-shrink-0\">Fixed\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n**Practical Examples:** Navbar: `flex justify-between items-center`. Centering: `flex justify-center items-center h-screen`. Responsive layout: `flex-col md:flex-row`.\n\n**Common Mistakes:** Using `flex-1` vs `flex-auto`; misunderstanding `flex-grow` default behavior; not setting `min-width: 0` for overflow.\n\n**Edge Cases:** Safari flexbox bugs with `min-height`; use `flex-1` with `overflow-auto`.\n\n**Interview Follow-ups:** How to achieve equal width columns? `flex-1` on all children. How to make last item take remaining space? `flex-1` on that item.\n\n**Best Practices:** Use `gap` instead of margin on flex children. Use `flex-shrink-0` for fixed width items (e.g., avatars).\n\n**Responsive Considerations:** Change direction at breakpoints: `flex-col lg:flex-row`.\n\n**Accessibility:** No direct.\n\n**Performance Optimization:** Fine.\n\n**Production Recommendations:** Use flex for one-dimensional layouts; use grid for two-dimensional.\n\n**Latest Tailwind Patterns:** Arbitrary values: `flex-[2_1_0]`. `place-content-center` for both justify and align.\n\n**Interview Tip:** Explain `flex` shorthand: `flex-1` = `flex: 1 1 0%`, `flex-auto` = `1 1 auto`, `flex-initial` = `0 1 auto`.\n\n**Common Follow-up:** How to make flex children wrap but keep first item full width? Use `flex-wrap` and `w-full` on first child.\n\n**Real-world Example:** Product listing: `flex flex-wrap gap-4`, each card `w-full sm:w-[calc(50%-1rem)] lg:w-[calc(33%-1rem)]`.",[14,65,185],{"id":212,"category":147,"question":213,"answer":214,"level":10,"tags":215},30,"What Grid utilities does Tailwind provide?","**Concept Explanation:** Tailwind provides utilities for CSS Grid: `grid` (display: grid), `grid-cols-{n}`, `grid-rows-{n}`, `gap`, `col-span-{n}`, `row-span-{n}`, `col-start-{n}`, etc. Also responsive variants.\n\n**Internal Behavior:** Each utility sets corresponding CSS properties. `grid-cols-3` => `grid-template-columns: repeat(3, minmax(0, 1fr))`. `col-span-2` => `grid-column: span 2 \u002F span 2`.\n\n**Syntax Explanation:** `grid-cols-1`, `grid-cols-12`, `grid-rows-none`, `gap-4`, `gap-x-2`, `gap-y-3`. Placement: `col-span-full`, `row-span-2`, `col-start-2`, `row-end-4`.\n\n**CSS Examples:**\n```css\n.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"grid grid-cols-3 gap-4\">\n  \u003Cdiv class=\"col-span-2\">Main\u003C\u002Fdiv>\n  \u003Cdiv>Sidebar\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n**Practical Examples:** Dashboard layout: `grid grid-cols-1 md:grid-cols-3`. Card grid: `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6`.\n\n**Common Mistakes:** Using `grid-cols-1` is default but need to set for responsiveness; forgetting that `col-span-*` requires parent grid with defined columns.\n\n**Edge Cases:** Implicit rows: use `grid-rows-auto`; `auto-rows-min`. Negative column start is not supported.\n\n**Interview Follow-ups:** How to create auto-fill responsive grid? `grid-cols-{n}` is fixed; use `repeat(auto-fit, minmax(200px, 1fr))` via arbitrary `grid-cols-[repeat(auto-fit,minmax(200px,1fr))]`.\n\n**Best Practices:** Combine grid with flex for inner items. Use `gap` over margin.\n\n**Responsive Considerations:** Change column count at breakpoints.\n\n**Accessibility:** No direct.\n\n**Performance Optimization:** Grid is efficient.\n\n**Production Recommendations:** Use grid for page layout; use flex for component layout.\n\n**Latest Tailwind Patterns:** `grid-cols-subgrid` for subgrid support; `grid-flow-dense` for auto-placement.\n\n**Interview Tip:** Compare grid vs flex for responsive card grids.\n\n**Common Follow-up:** How to make grid items fill remaining height? Set `grid-template-rows: 1fr auto`.\n\n**Real-world Example:** Photo gallery: `grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2` with images `aspect-square object-cover`.",[14,72,185],{"id":217,"category":147,"question":218,"answer":219,"level":10,"tags":220},31,"How do hover, focus, and other state variants work in Tailwind?","**Concept Explanation:** Tailwind provides state variants (hover, focus, active, disabled, etc.) that apply styles only when the element is in that state. They are prefixed to utilities: `hover:bg-blue-700`.\n\n**Internal Behavior:** Tailwind generates CSS rules using pseudo-classes. `hover:bg-blue-700` becomes `.hover\\:bg-blue-700:hover { background-color: ... }`. Variants can be combined: `hover:focus:bg-red`.\n\n**Syntax Explanation:** `\u003Cvariant>:\u003Cutility>` e.g., `hover:text-white`, `focus:outline-none`, `active:scale-95`, `disabled:opacity-50`.\n\n**CSS Examples:**\n```css\n.hover\\:bg-blue-700:hover {\n  background-color: #1d4ed8;\n}\n```\n\n**Tailwind Examples:**\n```html\n\u003Cbutton class=\"bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 active:bg-blue-800\">\n  Click\n\u003C\u002Fbutton>\n```\n\n**Practical Examples:** Interactive buttons, form inputs focus styles, links hover underline, card hover shadow increase.\n\n**Common Mistakes:** Forgetting to add the variant prefix for states; using `focus` without removing default outline but also not providing a custom outline; overusing variants increasing CSS size.\n\n**Edge Cases:** `group-hover` and `peer-checked` variants for parent\u002Fchild relationships. `focus-visible` for keyboard-only focus.\n\n**Interview Follow-ups:** How to create custom variants? Use `addVariant` plugin. What is the difference between `focus` and `focus-visible`? How to target `:focus-within`?\n\n**Best Practices:** Prefer `focus-visible` for focus styles to avoid intrusive outlines for mouse clicks. Use `group` for parent-child state.\n\n**Responsive Considerations:** Combine with responsive: `md:hover:bg-blue-700`.\n\n**Accessibility:** Ensure focus indicators are visible. Use `focus:ring` for clear focus.\n\n**Performance Optimization:** No major impact.\n\n**Production Recommendations:** Configure which variants are generated in `tailwind.config.js` variants (v2) but in v3 all variants are on by default.\n\n**Latest Tailwind Patterns:** `has-[:checked]:bg-blue` using `has-` variant. Arbitrary group\u002Fpeer: `group-[:checked]:block`.\n\n**Interview Tip:** Demonstrate a card that shows a button on hover: group, group-hover:block.\n\n**Common Follow-up:** How to style an element when a sibling is checked? Use `peer` and `peer-checked`.\n\n**Real-world Example:** Dropdown menu: trigger button `peer` and dropdown hidden `peer-focus:block` (with focus on button) or hover group.",[14,221,100],"states",{"id":223,"category":147,"question":224,"answer":225,"level":10,"tags":226},32,"How does dark mode work in Tailwind CSS?","**Concept Explanation:** Tailwind supports dark mode using the `dark` variant. It applies styles when the parent element has `class=\"dark\"` or when the system preference is dark (via `prefers-color-scheme`), depending on configuration.\n\n**Internal Behavior:** You configure `darkMode: 'class'` (manual toggle) or `'media'` (follows OS). For `class` strategy, you add `dark` class to `html` element. Tailwind generates `.dark .bg-gray-800` CSS rules.\n\n**Syntax Explanation:** `dark:bg-gray-800` applies background in dark mode. Combine with other variants: `dark:hover:bg-gray-700`.\n\n**CSS Examples:**\n```css\n.dark .dark\\:bg-gray-800 {\n  background-color: #1f2937;\n}\n```\n\n**Tailwind Examples:**\n```html\n\u003Chtml class=\"dark\">\n  \u003Cbody class=\"bg-white dark:bg-gray-900 text-black dark:text-white\">\n    \u003Cdiv class=\"bg-gray-200 dark:bg-gray-800\">Card\u003C\u002Fdiv>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n**Practical Examples:** Toggle button using JavaScript to add\u002Fremove `dark` class on `html`. Saving user preference in localStorage.\n\n**Common Mistakes:** Forgetting to set `darkMode` in config; using `dark:` variant without fallback light mode styles; not persisting user preference.\n\n**Edge Cases:** Third-party components not styled for dark mode; need custom override using `dark:`.\n\n**Interview Follow-ups:** How do you implement dark mode with Tailwind? Explain the difference between `media` and `class`. How to handle dark mode in SSR (Next.js)? Use `next-themes`.\n\n**Best Practices:** Use `class` strategy for user-controlled toggle. Define dark mode colors in config. Use CSS variables for more dynamic theming.\n\n**Responsive Considerations:** Dark mode works across breakpoints.\n\n**Accessibility:** Ensure color contrast in both modes; support `prefers-color-scheme` for OS level.\n\n**Performance Optimization:** Dark mode adds extra CSS but purging removes unused.\n\n**Production Recommendations:** Provide a toggle button; store preference; avoid flicker by inline script.\n\n**Latest Tailwind Patterns:** Dark mode with `@tailwindcss\u002Fforms` supports dark styling automatically. Use `dark:bg-black` etc.\n\n**Interview Tip:** Demo dark mode toggle with React state and class toggling.\n\n**Common Follow-up:** How to make only specific elements react to dark mode? Use `dark:` on those elements.\n\n**Real-world Example:** A blog with dark mode toggle: Button switches class on `html`. All components use `dark:` variants for backgrounds, text, borders.",[14,227,192],"dark-mode",[229,235,239,249,256,264,272,278,284,293,299,306,312,317,322,328,332,339,345,351,360,367],{"id":6,"category":61,"question":230,"answer":231,"level":232,"tags":233},"What are advanced Flexbox concepts like flex-grow, flex-shrink, flex-basis, and how do they work together?","**Concept Explanation:** Flexbox's sizing algorithm uses three properties: `flex-grow` (ability to absorb extra space), `flex-shrink` (ability to shrink when space is scarce), and `flex-basis` (initial main size before distribution). The shorthand `flex: grow shrink basis` controls item responsiveness.\n\n**Internal Behavior:** Browser calculates total available space in flex container, subtracts sum of `flex-basis` of items, then distributes remaining space proportionally according to `flex-grow` ratios. If negative, items shrink based on `flex-shrink` ratios. `flex-basis: auto` uses content width; `0%` forces equal distribution.\n\n**Syntax Explanation:** `flex-grow: 1;` `flex-shrink: 1;` `flex-basis: 0%;` shorthand `flex: 1 1 0%;` (common). Tailwind: `flex-1`, `flex-grow`, `flex-shrink-0`, `flex-initial`, `flex-auto`, `flex-none`, also arbitrary `flex-[2_1_0]`.\n\n**CSS Examples:**\n```css\n.item { flex: 1; } \u002F* grow=1, shrink=1, basis=0% *\u002F\n.item-fixed { flex: 0 0 200px; } \u002F* don't grow\u002Fshrink, fixed 200px *\u002F\n.item-dynamic { flex: 2 1 100px; } \u002F* start at 100px, grow twice as fast *\u002F\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"flex\">\n  \u003Cdiv class=\"flex-1\">Grows equally\u003C\u002Fdiv>\n  \u003Cdiv class=\"flex-2\">Grows twice as much (custom)\u003C\u002Fdiv>\n  \u003Cdiv class=\"flex-shrink-0 w-32\">Fixed width, won't shrink\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n**Practical Examples:** Sidebar (fixed width) + main content (fills rest): sidebar `flex-shrink-0 w-64`, main `flex-1`. Three-column card: middle column `flex-2`, others `flex-1`. Form input with button: input `flex-1`, button `flex-shrink-0`.\n\n**Common Mistakes:** Confusing `flex: 1` vs `flex: auto`; `flex: auto` sets `flex-basis: auto` (content size). Forgetting `min-width: 0` on flex items causing overflow. Using `flex-basis: 0%` for equal columns but content can force min-width.\n\n**Edge Cases:** Nested flex containers with `flex: 1` may collapse; set `min-height: 0` or `overflow: auto`. Safari bug with `flex-basis: 0` and percentage heights.\n\n**Interview Follow-ups:** What happens when you set `flex: 1 1 0%` vs `flex: 1 1 auto`? How do you prevent a flex item from shrinking below its content size? Use `min-width: 0` or `overflow: hidden`. Explain `flex-basis: content`.\n\n**Best Practices:** Use `flex: 1` for equal distribution. Use `flex-shrink-0` for fixed elements. Always test on Safari. Use `gap` instead of margins.\n\n**Responsive Considerations:** Change flex behavior at breakpoints: `flex-1 md:flex-none md:w-48`.\n\n**Accessibility:** No direct impact, but ensure order is logical.\n\n**Performance Optimization:** Flex layout recalculation is fast; avoid deeply nested large lists.\n\n**Production Recommendations:** Prefer Tailwind flex utilities. For complex grids, consider CSS Grid. Use `flex-1` over `flex-grow` alone.\n\n**Latest Tailwind Patterns:** Arbitrary flex values: `flex-[2_1_0]`. `basis-1\u002F2` for percentage basis.\n\n**Interview Tip:** Demonstrate calculating final widths given `flex-grow` ratios.\n\n**Common Follow-up:** How to make a flex item take remaining space but not push other items? Use `flex-grow: 1` on that item only.\n\n**Real-world Example:** Navbar with logo, nav links (centered), user menu. Logo `mr-auto`, links container `flex-1 justify-center`, user menu `ml-auto`.","intermediate",[12,65,14,234],"advanced",{"id":16,"category":68,"question":236,"answer":237,"level":232,"tags":238},"Explain advanced CSS Grid features: auto-fit, auto-fill, minmax, dense, subgrid.","**Concept Explanation:** Advanced Grid features enable responsive, content-aware layouts without media queries. `auto-fit` and `auto-fill` control how many columns fit in a container. `minmax()` sets flexible track sizes. `dense` fills gaps by reordering items. `subgrid` allows nested grids to align with parent tracks.\n\n**Internal Behavior:** `repeat(auto-fit, minmax(200px, 1fr))` creates as many columns as possible with minimum 200px, then stretches to fill container. `auto-fit` collapses empty tracks to zero width, `auto-fill` preserves them. `subgrid` inherits parent's track definitions, enabling consistent alignment across nested components.\n\n**Syntax Explanation:** `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));` `grid-auto-flow: dense;` `grid-template-rows: subgrid;` (parent must have defined rows). Tailwind: via arbitrary values `grid-cols-[repeat(auto-fit,minmax(200px,1fr))]` and `subgrid` support in v3.4+ `grid-cols-subgrid`.\n\n**CSS Examples:**\n```css\n.gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;\n}\n.masonry {\n  grid-auto-flow: dense;\n}\n.item-large { grid-column: span 2; }\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4\">\n  \u003C!-- cards auto-fit responsive -->\n\u003C\u002Fdiv>\n\u003Cdiv class=\"grid grid-cols-subgrid col-span-3\">\n  \u003C!-- subgrid child -->\n\u003C\u002Fdiv>\n```\n\n**Practical Examples:** Responsive gallery – no media queries needed: cards automatically wrap. Dashboard with widgets of varying sizes using `dense` to fill space. Form layout where nested field sets align with parent grid columns via `subgrid`.\n\n**Common Mistakes:** Confusing `auto-fit` vs `auto-fill`; `auto-fill` may create many empty columns causing overflow. Using `dense` can reorder items visually but not DOM, confusing screen readers. Assuming `subgrid` works in all browsers (Chromium 117+, Firefox, Safari 16.4+).\n\n**Edge Cases:** `minmax(0, 1fr)` prevents overflow from large content. `subgrid` only works if parent grid has explicit tracks.\n\n**Interview Follow-ups:** How does `auto-fit` differ from `auto-fill`? Give a scenario for each. Can you combine `dense` with `order`? Yes, but careful. What is the status of `subgrid` support?\n\n**Best Practices:** Use `auto-fit` for responsive card grids. Use `dense` only when visual order doesn't affect semantics. Use `subgrid` for consistent row\u002Fcolumn alignment in component libraries.\n\n**Responsive Considerations:** Combine `auto-fit` with media queries for breakpoint changes: `grid-cols-[repeat(auto-fit,minmax(300px,1fr))] lg:grid-cols-[repeat(auto-fit,minmax(400px,1fr))]`.\n\n**Accessibility:** `dense` reorders visually; ensure DOM order is logical for keyboard navigation. Use `aria-label` if necessary.\n\n**Performance Optimization:** Auto-placement is efficient; subgrid may have slight overhead.\n\n**Production Recommendations:** Use `auto-fit` for content-driven layouts. Prefer explicit breakpoints for critical layouts. Test subgrid in all target browsers.\n\n**Latest Tailwind Patterns:** Tailwind v3.4+ supports `subgrid` with `grid-cols-subgrid` and `grid-rows-subgrid`. Arbitrary values for `grid-auto-flow: dense`.\n\n**Interview Tip:** Demonstrate responsive card grid without media queries using `auto-fit`.\n\n**Common Follow-up:** How to make cards fill remaining space but not stretch last row? Use `grid-auto-rows: 1fr` and align items to start.\n\n**Real-world Example:** Product listing: `grid grid-cols-[repeat(auto-fit,minmax(260px,1fr))] gap-6`. Each card has `flex flex-col` to handle variable content.",[12,72,86,14],{"id":23,"category":240,"question":241,"answer":242,"level":232,"tags":243},"Architecture","What are CSS architecture patterns and how do they scale? (OOCSS, SMACSS, ITCSS)","**Concept Explanation:** CSS architecture patterns help organize styles for large projects. OOCSS (Object-Oriented CSS) separates structure from skin. SMACSS (Scalable and Modular Architecture for CSS) categorizes rules into base, layout, module, state, theme. ITCSS (Inverted Triangle CSS) organizes by specificity and reach from generic to explicit.\n\n**Internal Behavior:** These methodologies reduce specificity conflicts, improve maintainability, and enforce naming conventions. They work by imposing structure on CSS authoring, not by changing browser behavior.\n\n**Syntax Explanation:** OOCSS: separate container (`.media`) from content (`.media-img`, `.media-body`). SMACSS: prefixed classes like `.l-grid`, `.btn-primary`, `.is-active`. ITCSS: layered folder structure: settings, tools, generic, elements, objects, components, utilities.\n\n**CSS Examples:**\n```css\n\u002F* OOCSS *\u002F\n.card { background: white; border-radius: 8px; }\n.card-title { font-size: 1.25rem; }\n\u002F* SMACSS *\u002F\n.l-sidebar { width: 250px; }\n.btn { display: inline-block; }\n.btn-primary { background: blue; }\n```\n\n**Tailwind Examples:** Tailwind is utility-first, which inherently follows utility layer of ITCSS. But you can combine: use `@apply` to create SMACSS modules.\n\n**Practical Examples:** Large e-commerce site: SMACSS for component library, BEM for product tiles. Design system: ITCSS with CSS custom properties for theming.\n\n**Common Mistakes:** Over-engineering for small projects; mixing methodologies inconsistently; creating overly specific selectors.\n\n**Edge Cases:** Legacy codebases may need gradual migration. CSS-in-JS can conflict with external CSS architecture.\n\n**Interview Follow-ups:** How does BEM fit into these architectures? What are the drawbacks of SMACSS? Compare ITCSS with Tailwind's layer system.\n\n**Best Practices:** Choose one methodology per project. For component frameworks, consider CSS Modules or styled-components. For global styles, ITCSS + BEM.\n\n**Responsive Considerations:** All patterns accommodate media queries; SMACSS has layout and module separation.\n\n**Accessibility:** No direct impact.\n\n**Performance Optimization:** Good architecture reduces CSS duplication and specificity battles, indirectly improving performance.\n\n**Production Recommendations:** For large teams, enforce with stylelint rules. Use Tailwind for utility layer, ITCSS for component layers.\n\n**Latest Tailwind Patterns:** Tailwind's `@layer` (base, components, utilities) mirrors ITCSS. Use `@layer components` for reusable components.\n\n**Interview Tip:** Explain that modern frameworks have reduced need for complex CSS architecture, but still valuable for global styles.\n\n**Common Follow-up:** How would you refactor a legacy codebase with specificity issues? Gradual migration with scoped CSS or CSS Modules.\n\n**Real-world Example:** A CMS with many plugins: use SMACSS base and layout layers for core, allow plugins to add modules with namespaced BEM.",[12,244,245,246,247,248],"architecture","oocss","smacss","itcss","scalability",{"id":31,"category":250,"question":251,"answer":252,"level":232,"tags":253},"BEM","Explain BEM methodology (Block, Element, Modifier) with examples and common pitfalls.","**Concept Explanation:** BEM (Block, Element, Modifier) is a naming convention that makes CSS classes self-documenting and avoids specificity wars. Block: standalone component (`.card`). Element: part of block (`.card__title`). Modifier: variant or state (`.card--large`, `.card--featured`).\n\n**Internal Behavior:** BEM uses single-class selectors only, avoiding nesting. Each class has equal specificity (0,0,1,0). This prevents cascade conflicts. Modifiers are applied as additional classes.\n\n**Syntax Explanation:** `.block__element--modifier`. Double underscore for element, double hyphen for modifier. Modifier can be Boolean (`.button--disabled`) or key-value (`.button--color-red`).\n\n**CSS Examples:**\n```css\n.card { background: white; }\n.card__title { font-size: 1.5rem; }\n.card__image { border-radius: 8px; }\n.card--large { padding: 2rem; }\n.card--featured { border: 2px solid gold; }\n```\n\n**Tailwind Examples:** Tailwind doesn't enforce BEM, but you can combine: `\u003Cdiv class=\"card p-4 bg-white\">` with a BEM class for custom styles: `.card--large { @apply p-8; }`.\n\n**Practical Examples:** Navigation menu: `.nav`, `.nav__item`, `.nav__link`, `.nav__link--active`. Modal: `.modal`, `.modal__header`, `.modal__close--large`.\n\n**Common Mistakes:** Nesting BEM classes in CSS (`.card .card__title` defeats purpose). Using overly long names. Not using modifiers properly (applying modifier as separate class).\n\n**Edge Cases:** Styling based on parent modifier: use JavaScript or additional modifier on child. Deep nesting: consider if element should be a separate block instead.\n\n**Interview Follow-ups:** How do you handle hover states in BEM? Create modifier `button--hover` or use pseudo-classes? Pseudo-classes are fine. How to avoid deep BEM? Extract subcomponents as new blocks.\n\n**Best Practices:** Keep block names short. Avoid referencing element outside its block. Use SCSS `&__element` for conciseness. Never use IDs or tag selectors with BEM.\n\n**Responsive Considerations:** Use modifier `block--mobile` or responsive classes alongside BEM.\n\n**Accessibility:** No direct impact, but clear naming helps.\n\n**Performance Optimization:** Single-class selectors are fast.\n\n**Production Recommendations:** Enforce BEM with stylelint or ESLint. Use PostCSS plugin. In React\u002FVue, scoped CSS or CSS Modules often replace BEM.\n\n**Latest Tailwind Patterns:** Tailwind's utility-first reduces need for BEM. But BEM still useful for component libraries with `@apply`.\n\n**Interview Tip:** Demonstrate converting a nested SCSS component to BEM.\n\n**Common Follow-up:** How do you name a block that contains another block? Keep separate BEM blocks, avoid nesting in naming.\n\n**Real-world Example:** A product card in an e-commerce site: `.product-card`, `.product-card__image`, `.product-card__title`, `.product-card__price`, `.product-card--sale`.",[12,254,255,244],"bem","naming",{"id":38,"category":257,"question":258,"answer":259,"level":232,"tags":260},"CSS Modules","What are CSS Modules and how do they solve scoping issues? Compare with Tailwind.","**Concept Explanation:** CSS Modules are CSS files where class names are locally scoped by default. When imported, each class name is transformed into a unique hash (e.g., `.button` becomes `._button_123abc`), preventing global conflicts. Used mainly with bundlers like Webpack.\n\n**Internal Behavior:** At build time, CSS Modules parses CSS files, renames selectors with unique identifiers, and exports a mapping object (class name → generated name). This local scope eliminates naming collisions without needing naming conventions like BEM.\n\n**Syntax Explanation:** `import styles from '.\u002FButton.module.css';` then `\u003Cdiv className={styles.button}>`. Composition: `composes: base from '.\u002Fbase.css'`.\n\n**CSS Examples:**\n```css\n\u002F* Button.module.css *\u002F\n.button {\n  background: blue;\n  color: white;\n  composes: rounded from '.\u002Futils.css';\n}\n```\n\n**Tailwind Examples:** Tailwind can be used with CSS Modules: import Tailwind utilities in a CSS Module, or use Tailwind classes directly in JSX alongside CSS Modules. Some use `@apply` inside CSS Modules.\n\n**Practical Examples:** React component library: each component has its own `.module.css` file, styles don't leak.\n\n**Common Mistakes:** Trying to use dynamic class names (use `style={}` instead). Forgetting that global styles (like Tailwind reset) still apply.\n\n**Edge Cases:** Animations (`@keyframes`) and media queries are also scoped by default.\n\n**Interview Follow-ups:** How do CSS Modules compare to styled-components? Performance? CSS Modules produce static CSS, better for runtime. Can you use Tailwind inside CSS Modules? Yes, using `@import 'tailwindcss\u002Futilities';` then `@apply`.\n\n**Best Practices:** Use CSS Modules for component-specific styles, Tailwind for utilities. Keep CSS Modules simple, avoid deep nesting.\n\n**Responsive Considerations:** Media queries work as normal.\n\n**Accessibility:** No impact.\n\n**Performance Optimization:** Generated CSS is minimal and cacheable.\n\n**Production Recommendations:** For React, CSS Modules + Tailwind is powerful. Use `postcss-modules`.\n\n**Latest Tailwind Patterns:** Tailwind can be configured to work with CSS Modules by disabling preflight or using `import 'tailwind.css'` inside modules.\n\n**Interview Tip:** Show how CSS Modules prevent style conflicts in a large app.\n\n**Common Follow-up:** How do you define global styles in CSS Modules? Use `:global(.class)` syntax.\n\n**Real-world Example:** A button component: `Button.module.css` with `.primary`, `.secondary`, imported and conditionally applied.",[261,262,263,14],"css-modules","scoping","react",{"id":46,"category":265,"question":266,"answer":267,"level":232,"tags":268},"SCSS","What are SCSS basics (variables, nesting, mixins, extends) and how do they improve CSS authoring?","**Concept Explanation:** SCSS (Sassy CSS) is a preprocessor that extends CSS with features like variables (`$primary`), nesting, mixins (reusable blocks), and inheritance (`@extend`). It compiles to standard CSS, making stylesheets more maintainable and DRY.\n\n**Internal Behavior:** SCSS is compiled before browser parsing. Variables are replaced with values; nesting is flattened to descendant selectors; mixins inject code; `@extend` groups selectors sharing same rules. No runtime overhead.\n\n**Syntax Explanation:** Variables: `$font-stack: Helvetica, sans-serif;`. Nesting: `.nav { a { color: blue; } }`. Mixin: `@mixin flex-center { display: flex; justify-content: center; }` then `@include flex-center`. Extend: `%message-shared { border: 1px solid; } .error { @extend %message-shared; }`.\n\n**CSS Examples:**\n```scss\n$primary: #3498db;\n.button {\n  background: $primary;\n  &:hover { background: darken($primary, 10%); }\n}\n@mixin border-radius($radius) { border-radius: $radius; }\n.card { @include border-radius(8px); }\n```\n\n**Tailwind Examples:** Tailwind renders SCSS mostly unnecessary because utilities replace many SCSS features. However, you can use SCSS with Tailwind for custom component layers.\n\n**Practical Examples:** Theme variables, responsive mixins (breakpoint helper), button variants via mixin parameters.\n\n**Common Mistakes:** Over-nesting (4+ levels) causing high specificity; using `@extend` with placeholder classes only; forgetting to import partials.\n\n**Edge Cases:** `@extend` can generate large selectors; avoid inside media queries. Mixins can cause CSS duplication if overused.\n\n**Interview Follow-ups:** Difference between `@mixin` and `@extend`? When to use each? How does SCSS compare to CSS custom properties? SCSS compiles at build time, CSS variables are runtime.\n\n**Best Practices:** Nest max 3 levels deep. Use mixins for vendor prefixes or complex logic. Use `@extend` only for identical styles without parameters.\n\n**Responsive Considerations:** Use mixins for media query management: `@include respond-to(medium) { ... }`.\n\n**Accessibility:** No impact.\n\n**Performance Optimization:** Compiled SCSS same as regular CSS.\n\n**Production Recommendations:** Use SCSS for large codebases with complex theming. For new projects with Tailwind, SCSS might be overkill.\n\n**Latest Tailwind Patterns:** Tailwind's `@apply` within SCSS works well. Use `@use` instead of `@import` in modern SCSS.\n\n**Interview Tip:** Explain how nesting maps to descendant selectors and potential specificity issues.\n\n**Common Follow-up:** How would you convert a SCSS variable to a CSS custom property for runtime theming?\n\n**Real-world Example:** A design system with SCSS: `$breakpoints`, `@mixin bp($size)`, components use `@include bp(md) { ... }`.",[269,270,271,12],"scss","preprocessor","sass",{"id":53,"category":82,"question":273,"answer":274,"level":232,"tags":275},"How do you build complex responsive layouts that go beyond simple breakpoints?","**Concept Explanation:** Complex responsive layouts combine fluid grids, container queries, responsive images, and component-level adaptation. Techniques include fluid typography using `clamp()`, intrinsic layout with `min()\u002Fmax()`, and macro\u002Fmicro layout strategies.\n\n**Internal Behavior:** Modern CSS allows responsive behavior without media queries via flex\u002Fgrid wrapping, `clamp()` for sizes, and container queries for component responsiveness based on parent container width rather than viewport.\n\n**Syntax Explanation:** Fluid typography: `font-size: clamp(1rem, 2vw + 1rem, 2rem);`. Container queries: `@container (min-width: 300px) { .card { flex-direction: row; } }`. Intrinsic width: `width: min(100%, 1200px);`.\n\n**CSS Examples:**\n```css\n\u002F* Fluid spacing *\u002F\n.container { padding: clamp(1rem, 5vw, 3rem); }\n\u002F* Container query *\u002F\n.card-container { container-type: inline-size; }\n@container (min-width: 400px) {\n  .card { display: flex; }\n}\n```\n\n**Tailwind Examples:** Tailwind's responsive prefixes are viewport-based. For container queries, use `@tailwindcss\u002Fcontainer-queries` plugin with `@sm:flex`, `@md:grid`.\n\n**Practical Examples:** A card that switches layout when its container is narrow (sidebar vs main content). A dashboard with widgets that adapt independently.\n\n**Common Mistakes:** Over-relying on viewport breakpoints for components; not using `container-type` correctly; forgetting `clamp()` fallbacks for older browsers.\n\n**Edge Cases:** Container queries not supported in older browsers; provide fallback. `clamp()` can cause accessibility issues if min is too small.\n\n**Interview Follow-ups:** What are container queries and how do they differ from media queries? How do you handle responsive images with `srcset` and `sizes`? Explain the concept of intrinsic design.\n\n**Best Practices:** Use media queries for page layout (macro), container queries for component layout (micro). Use fluid units for spacing and typography.\n\n**Responsive Considerations:** Combine fluid grids, container queries, and media queries for full adaptive system.\n\n**Accessibility:** Ensure `clamp()` doesn't reduce font size below 16px. Provide zoom support.\n\n**Performance Optimization:** Container queries add some overhead but acceptable. Use `contain` property.\n\n**Production Recommendations:** Use Tailwind's container queries plugin for component-level responsive design. Set up fluid type scale with `clamp`.\n\n**Latest Tailwind Patterns:** `@container` with `@lg:flex-col` via plugin. `text-fluid` custom utility using `clamp`.\n\n**Interview Tip:** Demonstrate a card that changes layout based on parent container using container queries.\n\n**Common Follow-up:** How do you test container queries in dev tools? Chrome supports.\n\n**Real-world Example:** A product card that shows image left on wide container, image above on narrow container. Parent product grid has container queries.",[86,276,277,14],"container-queries","fluid",{"id":60,"category":279,"question":280,"answer":281,"level":232,"tags":282},"Mobile-First","Explain mobile-first design and how to implement it with CSS and Tailwind.","**Concept Explanation:** Mobile-first design means starting with styles for the smallest screen, then adding enhancements for larger screens using `min-width` media queries. This ensures a fast, usable experience on mobile and progressive enhancement for desktop.\n\n**Internal Behavior:** Base CSS applies to all devices (mobile). Media queries `@media (min-width: ...)` add overrides for larger screens. This avoids redundant CSS and reduces page weight for mobile users.\n\n**Syntax Explanation:** CSS: `.container { display: block; }` then `@media (min-width: 768px) { .container { display: flex; } }`. Tailwind: use base class for mobile, responsive variants for larger: `block md:flex` (mobile is block, at `md` becomes flex).\n\n**CSS Examples:**\n```css\n\u002F* Mobile first *\u002F\n.card { padding: 1rem; margin-bottom: 1rem; }\n@media (min-width: 768px) {\n  .card { display: flex; gap: 1rem; margin-bottom: 0; }\n}\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"p-4 mb-4 md:flex md:gap-4 md:mb-0\">Card\u003C\u002Fdiv>\n\u003C!-- grid: grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 -->\n```\n\n**Practical Examples:** Navigation: mobile hamburger hidden, desktop inline. Typography: mobile 16px, desktop 18px. Layout: mobile stack, desktop side-by-side.\n\n**Common Mistakes:** Using desktop-first approach with `max-width` queries (not wrong but less performant for mobile). Forgetting base styles for mobile. Using `hidden md:block` for mobile menu but still loading hidden desktop elements.\n\n**Edge Cases:** High-resolution desktop with large fonts: mobile-first ensures legibility. Touch targets: mobile need larger click areas (44px).\n\n**Interview Follow-ups:** Compare mobile-first vs desktop-first. Why is mobile-first recommended for performance? Smaller CSS sent to mobile devices. How do you handle images? Use `srcset` with smaller default.\n\n**Best Practices:** Always start with mobile styles. Use `min-width` breakpoints. Test on real devices. Use `@media (hover: hover)` for hover effects on desktop only.\n\n**Responsive Considerations:** Tailwind's default breakpoints (`sm`, `md`, `lg`, `xl`, `2xl`) follow mobile-first.\n\n**Accessibility:** Mobile-first ensures font sizes are adequate on small screens. Touch targets must be at least 44x44px.\n\n**Performance Optimization:** Less CSS for mobile (only base). Use `loading=\"lazy\"` for images.\n\n**Production Recommendations:** Set viewport meta tag. Use Tailwind's responsive variants consistently.\n\n**Latest Tailwind Patterns:** `max-*:` variants for desktop-first overrides when needed. `min-[width]` arbitrary breakpoints.\n\n**Interview Tip:** Show a mobile-first navigation bar that becomes horizontal on desktop.\n\n**Common Follow-up:** How do you handle complex mobile menus? Use `hidden` initially, then JavaScript toggle, or use `peer`\u002F`checkbox` trick.\n\n**Real-world Example:** An e-commerce product grid: `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4` – mobile has 1 column, desktop 4.",[283,86,14],"mobile-first",{"id":67,"category":285,"question":286,"answer":287,"level":232,"tags":288},"Accessibility","What are key CSS considerations for web accessibility? (Focus, contrast, motion, screen readers)","**Concept Explanation:** Accessibility (a11y) in CSS ensures users with disabilities can perceive, understand, and interact with web content. Key areas: focus indicators, color contrast, reduced motion, screen reader compatibility (via hiding techniques), and zoom support.\n\n**Internal Behavior:** Browsers provide default focus outlines; overriding them without replacement harms keyboard users. `prefers-reduced-motion` media query lets users request fewer animations. CSS `content` is sometimes read by screen readers. `display: none` removes from accessibility tree.\n\n**Syntax Explanation:** Focus: `:focus-visible { outline: 2px solid blue; outline-offset: 2px; }`. Contrast: `color: #333; background: white;` (ratio > 4.5:1). Reduced motion: `@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms; } }`. Visually hidden: `.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; }`.\n\n**CSS Examples:**\n```css\n\u002F* Focus visible *\u002F\nbutton:focus-visible {\n  outline: 2px solid #0066cc;\n  outline-offset: 2px;\n}\n\u002F* Respect reduced motion *\u002F\n@media (prefers-reduced-motion: reduce) {\n  .animation { animation: none; }\n}\n```\n\n**Tailwind Examples:** Tailwind provides `focus:ring`, `focus-visible:ring`, `sr-only`, `motion-safe:`, `motion-reduce:` variants.\n```html\n\u003Cbutton class=\"focus:ring-2 focus:ring-blue-500\">Click\u003C\u002Fbutton>\n\u003Cdiv class=\"sr-only\">Screen reader only text\u003C\u002Fdiv>\n\u003Cdiv class=\"motion-safe:animate-pulse\">Pulse only if motion allowed\u003C\u002Fdiv>\n```\n\n**Practical Examples:** Skiplink: hidden until focused. Form validation errors: ensure color not only indicator. Tooltips: use `aria-describedby` with CSS positioning.\n\n**Common Mistakes:** Removing `outline` without visible focus ring. Using color alone to convey status (red\u002Fgreen). Animating large areas without respecting `prefers-reduced-motion`.\n\n**Edge Cases:** `:focus-visible` not supported in older Safari; use `:focus` fallback. Windows High Contrast Mode: use `forced-color-adjust: none` sparingly.\n\n**Interview Follow-ups:** What is the difference between `:focus` and `:focus-visible`? How do you hide content visually but keep for screen readers? Explain `aria-hidden` vs CSS hiding.\n\n**Best Practices:** Always provide visible focus indicator. Test with keyboard only. Use `prefers-reduced-motion` for all animations. Aim for WCAG 2.1 AA contrast.\n\n**Responsive Considerations:** Zoom to 200% without horizontal scroll.\n\n**Accessibility:** This is the core of the question.\n\n**Performance Optimization:** No impact.\n\n**Production Recommendations:** Integrate aXe or Lighthouse into CI. Use Tailwind's focus rings and `sr-only`. Create a11y utility classes.\n\n**Latest Tailwind Patterns:** `focus-visible:ring-2`, `group-focus-visible`, `peer-focus-visible`. `forced-color-adjust: none` utility.\n\n**Interview Tip:** Demonstrate a skip navigation link.\n\n**Common Follow-up:** How do you make a custom checkbox accessible? Use `peer` and `sr-only` with focus styles.\n\n**Real-world Example:** A modal dialog: focus trap, `aria-modal`, and focus returns on close. CSS ensures overlay covers content.",[289,12,290,291,292,14],"accessibility","a11y","focus","contrast",{"id":74,"category":294,"question":295,"answer":296,"level":232,"tags":297},"Semantic HTML","How does semantic HTML relate to CSS and styling best practices?","**Concept Explanation:** Semantic HTML uses elements that convey meaning (`\u003Cheader>`, `\u003Cnav>`, `\u003Cmain>`, `\u003Carticle>`, `\u003Csection>`, `\u003Caside>`, `\u003Cfooter>`). CSS interacts by providing default styles and allowing custom styling while preserving the semantic structure for accessibility and SEO.\n\n**Internal Behavior:** Browsers apply default styles to semantic elements (e.g., `h1` is bold and large). CSS overrides these but cannot change the underlying semantics. Screen readers use HTML semantics to navigate; CSS should not break that (e.g., `display: block` on `span` is fine, but changing role is not).\n\n**Syntax Explanation:** Use `\u003Cbutton>` for interactive elements, not `\u003Cdiv>` with click handler. Use `\u003Cul>` for lists. CSS can style any element; but avoid using `role` or `aria` as CSS hooks.\n\n**CSS Examples:**\n```css\n\u002F* Good: styling semantic elements *\u002F\narticle { max-width: 65ch; margin: 0 auto; }\nnav ul { display: flex; list-style: none; }\nbutton { background: blue; }\n\u002F* Bad: using div for button *\u002F\n\u003Cdiv class=\"button\" role=\"button\" tabindex=\"0\">Click\u003C\u002Fdiv>\n```\n\n**Tailwind Examples:** Tailwind encourages semantic HTML because you style elements directly: `\u003Cnav class=\"flex...\">`, `\u003Cmain class=\"container...\">`. No need for extra `div` wrappers.\n\n**Practical Examples:** Blog post: `\u003Carticle class='prose'>`, header: `\u003Cheader class='sticky'>`, footer: `\u003Cfooter class='bg-gray-100'>`.\n\n**Common Mistakes:** Using `\u003Cdiv>` for everything, then adding ARIA roles. Styling `:focus` on non-focusable elements. Overriding default styles of semantic elements without considering accessibility.\n\n**Edge Cases:** CSS `display` changes default semantics (e.g., `display: flex` on `\u003Ctable>` breaks table semantics). Use CSS grid on `\u003Ctable>`? Don't. Keep semantic elements appropriate.\n\n**Interview Follow-ups:** Why is semantic HTML important for CSS? It provides a consistent structure. How would you style a custom-styled select dropdown while maintaining semantics? Use progressive enhancement.\n\n**Best Practices:** Use semantic HTML first, then enhance with CSS. Avoid unnecessary `div` soup. Use `@media` to adapt layouts without changing semantics.\n\n**Responsive Considerations:** Semantic elements respond like any other; ensure `main` content is main.\n\n**Accessibility:** Semantic HTML is the foundation of accessibility. CSS should not remove semantics (e.g., `display: contents` can break landmark roles).\n\n**Performance Optimization:** Semantic HTML helps browsers parse faster.\n\n**Production Recommendations:** Use HTML5 elements; validate with W3C validator. Combine with Tailwind for efficient styling.\n\n**Latest Tailwind Patterns:** Use `@apply` on semantic elements in base layer: `@layer base { article { @apply prose; } }`.\n\n**Interview Tip:** Show how a screen reader announces different semantic elements.\n\n**Common Follow-up:** Can CSS change the semantic meaning? No, but `display: contents` can remove an element from accessibility tree; use cautiously.\n\n**Real-world Example:** A news website: `\u003Carticle>` for each story, `\u003Cheader>` contains title and date, `\u003Cfooter>` has author info. CSS styles each without breaking structure.",[298,12,289,14],"semantic-html",{"id":81,"category":147,"question":300,"answer":301,"level":232,"tags":302},"How do you customize Tailwind CSS beyond default configuration? (Custom utilities, variants, plugins)","**Concept Explanation:** Tailwind customization involves modifying `tailwind.config.js` to extend theme, add custom utilities, create new variants, or build plugins. This allows brand-specific design systems and complex requirements not covered by defaults.\n\n**Internal Behavior:** Tailwind merges custom config with default theme. Custom utilities are generated as CSS classes. Variants (like `group-*`, `peer-*`) can be added via `addVariant`. Plugins use the `plugin` function to inject dynamic styles.\n\n**Syntax Explanation:** Extend theme: `theme: { extend: { colors: { brand: '#ff5733' } } }`. Add custom utility: `utilities: { '.text-shadow': { textShadow: '2px 2px 4px rgba(0,0,0,0.5)' } }`. Custom variant: `addVariant('children', '& > *')`. Plugin: `plugin(function({ addUtilities, theme }) { ... })`.\n\n**CSS Examples:** Generated: `.bg-brand { background-color: #ff5733; }`\n\n**Tailwind Examples (config):**\n```js\nmodule.exports = {\n  theme: {\n    extend: {\n      keyframes: { wiggle: { '0%, 100%': { transform: 'rotate(-3deg)' } } },\n      animation: { wiggle: 'wiggle 1s ease-in-out infinite' }\n    }\n  },\n  plugins: [\n    function({ addVariant }) {\n      addVariant('optional', '&:optional');\n    }\n  ]\n}\n```\n\n**Practical Examples:** Custom font family, container max-widths, custom breakpoint `xs`, custom shadow scale, form reset plugin (`@tailwindcss\u002Fforms`).\n\n**Common Mistakes:** Mutating `theme` directly instead of using `extend`. Overriding defaults accidentally. Forgetting to restart dev server after config changes.\n\n**Edge Cases:** Custom variants may conflict with default ones. Plugins ordering matters (before\u002Fafter core plugins).\n\n**Interview Follow-ups:** How to add a new utility that uses a CSS variable? Use `addUtilities`. How to create a plugin that generates responsive variants? Use `addUtilities` with `variants` option.\n\n**Best Practices:** Keep customization minimal; use `extend`. Name custom utilities with namespace. Use official plugins when possible.\n\n**Responsive Considerations:** Custom variants can be made responsive: `addVariant('children', '& > *')` does not auto generate responsive; use `matchVariant` for complex.\n\n**Accessibility:** Not directly.\n\n**Performance Optimization:** Custom utilities increase CSS size minimally; purge still works.\n\n**Production Recommendations:** Extract reusable customizations to a preset npm package. Use `safelist` for dynamic classes.\n\n**Latest Tailwind Patterns:** Using `matchVariant` for advanced variants (e.g., `group-[:checked]`). `addVariant` with `@supports`.\n\n**Interview Tip:** Show how to add a `text-stroke` utility.\n\n**Common Follow-up:** Can you conditionally apply styles based on arbitrary selectors? Yes, via `addVariant` or arbitrary variants `[&_p]:mt-2`.\n\n**Real-world Example:** A design system with custom brand colors, shadows, and a `focus-ring` plugin that matches brand color.",[14,303,304,305],"customization","config","plugins",{"id":88,"category":147,"question":307,"answer":308,"level":232,"tags":309},"Explain advanced tailwind.config.js options: presets, safelist, important, corePlugins.","**Concept Explanation:** Advanced config options control how Tailwind generates CSS and integrates with projects. `presets` share config across projects. `safelist` prevents classes from being purged. `important` adds `!important` to utilities. `corePlugins` disables built-in plugins to reduce size.\n\n**Internal Behavior:** `safelist` can be an array of patterns or object with `pattern` and `variants`. `presets` are merged recursively. `important: '#app'` scopes important to a root selector. `corePlugins` takes an array to disable (e.g., `['container', 'float']`).\n\n**Syntax Explanation:**\n```js\nmodule.exports = {\n  content: ['.\u002Fsrc\u002F**\u002F*.html'],\n  safelist: [\n    'bg-red-500',\n    { pattern: \u002F^text-\\w+$\u002F, variants: ['hover', 'focus'] }\n  ],\n  important: '#app',\n  corePlugins: { preflight: false, float: false },\n  presets: [require('.\u002Fmy-preset')]\n}\n```\n\n**CSS Examples:** Important: `.bg-blue-500 { background-color: #3b82f6 !important; }`.\n\n**Tailwind Examples:** Useful for CMS or dynamic class generation.\n\n**Practical Examples:** WordPress theme with dynamic classes: safelist all possible color variants. Share config across multiple apps using preset. Disable `preflight` when integrating with existing CSS.\n\n**Common Mistakes:** Overusing `important` causing specificity deadlock. Safelist regex too broad causing huge CSS. Disabling core plugins without providing alternatives.\n\n**Edge Cases:** `important: '#app'` only adds important to utilities, not base or components. `presets` merge arrays (like `plugins`) differently than objects.\n\n**Interview Follow-ups:** When would you use `safelist`? For dynamic class names from CMS. How does `important` affect Tailwind? It adds `!important` to all utilities, which can break component styles.\n\n**Best Practices:** Avoid `important` unless embedding Tailwind in legacy project. Use `safelist` with specific patterns, not entire color palettes. Use `presets` for design system standardization.\n\n**Responsive Considerations:** No direct.\n\n**Accessibility:** No impact.\n\n**Performance Optimization:** `corePlugins` reduces CSS size by disabling unused modules (e.g., `backdropFilter`).\n\n**Production Recommendations:** Use `safelist` for known dynamic classes. Use `presets` in monorepo.\n\n**Latest Tailwind Patterns:** Tailwind v3 `safelist` supports `pattern` and `variants`. `corePlugins` can accept a function for conditional disable.\n\n**Interview Tip:** Explain how to integrate Tailwind into an existing project with conflicting styles using `important: '#app'` to scope.\n\n**Common Follow-up:** How do you ensure dynamic classes like `text-${color}` are not purged? Use `safelist` with regex or provide complete list.\n\n**Real-world Example:** A CMS that allows users to choose button color from 5 options: safelist `bg-red-500`, `bg-blue-500`, etc. A design system preset shared across 10 micro-frontends.",[14,304,310,311],"safelist","presets",{"id":95,"category":147,"question":313,"answer":314,"level":232,"tags":315},"How to implement custom themes in Tailwind (light\u002Fdark, multiple themes, runtime switching)?","**Concept Explanation:** Custom themes go beyond light\u002Fdark, allowing multiple color schemes (e.g., high contrast, brand themes). Implementation uses CSS custom properties with Tailwind's arbitrary values, or dynamic class switching with different config files via `@apply`.\n\n**Internal Behavior:** Two approaches: (1) CSS variables + Tailwind theme referencing variables: `colors: { primary: 'var(--primary)' }`. (2) Separate CSS bundles for each theme, switched via class on `html`. Runtime switching modifies CSS variables or changes class.\n\n**Syntax Explanation:** Define variables in `:root` and `.theme-dark`: `--primary: #3b82f6;`. Tailwind config: `colors: { primary: 'var(--primary)' }`. Then use `text-primary`. For multiple themes, use data attribute: `[data-theme='dark'] { --primary: ... }`.\n\n**CSS Examples:**\n```css\n:root { --bg: white; --text: black; }\n[data-theme=\"dark\"] { --bg: #1a202c; --text: white; }\n[data-theme=\"high-contrast\"] { --bg: black; --text: yellow; }\nbody { background: var(--bg); color: var(--text); }\n```\n\n**Tailwind Examples (config):**\n```js\nmodule.exports = {\n  theme: { extend: { colors: { primary: 'var(--primary)', bg: 'var(--bg)' } } }\n}\n```\nThen use: `\u003Cdiv class=\"bg-bg text-primary\">`.\n\n**Practical Examples:** Multiple brand themes (light, dark, high contrast, sepia). User preference saved in localStorage. Toggle button updates `data-theme` attribute.\n\n**Common Mistakes:** Not providing fallback values for CSS variables. Overriding too many variables causing inconsistent styling. Forgetting to handle `prefers-color-scheme` for initial load.\n\n**Edge Cases:** Third-party components that don't use CSS variables may need separate styling. Transitions when switching themes can cause flicker.\n\n**Interview Follow-ups:** How do you handle theme switching without FOUC? Inline script before content loads. How to support `prefers-color-scheme` as initial default? Use media query to set variable.\n\n**Best Practices:** Use CSS variables for theming. Limit number of themes. Provide smooth transition. Persist user choice.\n\n**Responsive Considerations:** Themes apply regardless of viewport.\n\n**Accessibility:** Ensure sufficient contrast in all themes. Respect `prefers-contrast`.\n\n**Performance Optimization:** CSS variables have no performance penalty. Multiple CSS bundles would be heavier.\n\n**Production Recommendations:** Use `data-theme` attribute. Generate Tailwind colors from CSS variables via config.\n\n**Latest Tailwind Patterns:** Using `@tailwindcss\u002Ftypography` with dark mode `prose-invert`. Combine with `class` strategy for dark mode plus custom themes.\n\n**Interview Tip:** Demonstrate a theme switcher that changes CSS variables and updates Tailwind colors.\n\n**Common Follow-up:** How to generate Tailwind utilities for custom themes without rebuilding? Use CSS variables as values.\n\n**Real-world Example:** A SaaS app with 'night mode', 'light mode', and 'colorblind mode'. User selects from dropdown; JavaScript sets `data-theme` on `html`; all Tailwind classes using `bg-primary` adapt.",[14,192,316,227],"css-variables",{"id":102,"category":318,"question":319,"answer":320,"level":232,"tags":321},"CSS","What are container queries and how to use them with Tailwind?","**Concept Explanation:** Container queries allow styling an element based on its parent container's size rather than the viewport. This enables true component-level responsiveness, where a card can adapt to its container width (e.g., in a sidebar vs main content).\n\n**Internal Behavior:** Define a container with `container-type: inline-size`. The browser creates a container context. Use `@container (min-width: 300px) { ... }` to apply styles when the container's width meets the condition. Tailwind provides the `@tailwindcss\u002Fcontainer-queries` plugin with `@sm:`, `@md:`, `@lg:` variants.\n\n**Syntax Explanation:** CSS: `.card-container { container-type: inline-size; } @container (min-width: 400px) { .card { display: flex; } }`. Tailwind: add plugin, then `\u003Cdiv class=\"@container\">\u003Cdiv class=\"card @md:flex\">`.\n\n**CSS Examples:**\n```css\n.product-card-container { container-type: inline-size; }\n@container (min-width: 350px) {\n  .product-card { flex-direction: row; }\n  .product-card__image { width: 40%; }\n}\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"@container\">\n  \u003Cdiv class=\"product-card @lg:flex @lg:gap-4\">\n    \u003Cimg class=\"@lg:w-1\u002F3\" src=\"...\">\n    \u003Cdiv class=\"@lg:flex-1\">Content\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n**Practical Examples:** A card grid where cards switch from vertical to horizontal when grid columns are wide. Dashboard widgets that adapt to sidebar width. E-commerce product listings.\n\n**Common Mistakes:** Forgetting `container-type`. Applying container queries on the same element that's being queried (container can't query itself). Not providing fallbacks for unsupported browsers.\n\n**Edge Cases:** Nested containers: each creates its own context. `container-name` to differentiate. Container queries not supported in older Safari (before 16).\n\n**Interview Follow-ups:** How do container queries differ from media queries? Container queries are component-specific; media queries are viewport-specific. Can you combine both? Yes. What is `container-type: size` vs `inline-size`?\n\n**Best Practices:** Use container queries for reusable components. Use media queries for page layout. Provide fallback styles for browsers without support.\n\n**Responsive Considerations:** Container queries complement media queries.\n\n**Accessibility:** No direct impact.\n\n**Performance Optimization:** Container queries have some performance cost; use sparingly.\n\n**Production Recommendations:** Use the Tailwind container queries plugin. Test in supported browsers; polyfill available.\n\n**Latest Tailwind Patterns:** `@` variants: `@xs:flex`, `@sm:grid`, `@md:gap-4`. Custom container names: `@[sidebar]\u002Fmd:flex`.\n\n**Interview Tip:** Demonstrate a card that changes layout based on its container, not viewport.\n\n**Common Follow-up:** How do you debug container queries in Chrome? DevTools Elements > Computed > Container Queries.\n\n**Real-world Example:** A blog with a sidebar. In the main content area, cards are horizontal (wide container). In the sidebar, cards are vertical (narrow container). Using container queries, the same card component adapts without media queries.",[276,12,14,86],{"id":109,"category":147,"question":323,"answer":324,"level":232,"tags":325},"What are arbitrary values and variants in Tailwind, and when should you use them?","**Concept Explanation:** Arbitrary values allow you to use any CSS value directly in a class, e.g., `w-[200px]`, `bg-[#123456]`. Arbitrary variants apply styles based on custom selectors, e.g., `[&_p]:mt-4`. They are part of Tailwind's JIT engine, enabling one-off styles without editing config.\n\n**Internal Behavior:** Tailwind parses brackets `[value]` and generates the corresponding CSS. For arbitrary variants, `[selector]` creates a custom pseudo-class or selector. Use caution: they bypass the design system and may cause inconsistency.\n\n**Syntax Explanation:** Utility with arbitrary value: `top-[calc(100%+10px)]`, `grid-cols-[200px_1fr]`. Arbitrary variant: `[&:nth-child(3)]:text-red`, `[&_img]:rounded`. Combine: `md:[&>li]:inline-block`.\n\n**CSS Examples:** Generated: `.w-\\[200px\\] { width: 200px; }`\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"w-[17.5rem] bg-[#123456]\">Custom width and color\u003C\u002Fdiv>\n\u003Cdiv class=\"[&_p]:mt-2 [&_p:first-child]:mt-0\">\n  \u003Cp>This gets margin-top\u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\n**Practical Examples:** One-off design tweak that doesn't fit spacing scale. Third-party component requiring exact pixel value. Complex selector that would be overkill to add as a variant.\n\n**Common Mistakes:** Overusing arbitrary values, breaking design system consistency. Not escaping special characters (e.g., space in `grid-cols-[200px_1fr]`). Forgetting that arbitrary variants increase CSS size because they are unique.\n\n**Edge Cases:** Arbitrary values with spaces need underscores: `grid-cols-[200px_1fr]` works; or use `[200px_1fr]`. CSS variables: `bg-[var(--primary)]`. Tailwind may not parse some complex values; use `@layer` as fallback.\n\n**Interview Follow-ups:** What are the performance implications of arbitrary values? They generate unique CSS classes, not reusable. When should you avoid them? When the value is used repeatedly across the codebase.\n\n**Best Practices:** Use arbitrary values sparingly; prefer extending theme if a value is used more than twice. Use arbitrary variants for complex parent-child relationships.\n\n**Responsive Considerations:** Arbitrary values work with responsive prefixes: `md:w-[300px]`.\n\n**Accessibility:** No direct impact.\n\n**Performance Optimization:** Each arbitrary value generates a new class; many arbitrary values increase CSS size.\n\n**Production Recommendations:** Audit arbitrary values periodically; convert to config if repeated.\n\n**Latest Tailwind Patterns:** Arbitrary values support `clamp()`, `min()`, `max()`. Arbitrary variants support `&` for current element.\n\n**Interview Tip:** Show how to create a responsive grid with arbitrary `grid-cols-[repeat(auto-fit,minmax(200px,1fr))]`.\n\n**Common Follow-up:** How do you add an arbitrary variant that targets children with a specific class? `[&_.card]:p-4`.\n\n**Real-world Example:** A hero section with a background image from CMS: `bg-[url('https:\u002F\u002Fexample.com\u002Fimage.jpg')]`. A sticky header with dynamic offset `top-[calc(var(--header-height)+1rem)]`.",[14,326,327],"arbitrary-values","jit",{"id":116,"category":147,"question":329,"answer":330,"level":232,"tags":331},"What Tailwind plugins exist and how to create a custom plugin?","**Concept Explanation:** Tailwind plugins extend the framework with custom utilities, components, base styles, or variants. Official plugins include forms, typography, aspect-ratio, container-queries. Custom plugins allow reusing complex styling patterns across projects.\n\n**Internal Behavior:** Plugins use the `plugin` function that receives an API (`addUtilities`, `addComponents`, `addBase`, `addVariant`, `matchUtilities`, `matchVariant`, `theme`). They are executed during build and merged into the generated CSS.\n\n**Syntax Explanation:** Install: `npm install -D @tailwindcss\u002Fforms`. Config: `plugins: [require('@tailwindcss\u002Fforms')]`. Custom plugin:\n```js\nconst plugin = require('tailwindcss\u002Fplugin')\nmodule.exports = plugin(function({ addUtilities, theme }) {\n  addUtilities({\n    '.skew-10deg': { transform: 'skewY(-10deg)' },\n    '.skew-15deg': { transform: 'skewY(-15deg)' }\n  })\n})\n```\n\n**CSS Examples:** Plugin generates utilities like `.skew-10deg`.\n\n**Tailwind Examples:** Using `@tailwindcss\u002Fforms` automatically styles inputs. Using `@tailwindcss\u002Ftypography` adds `prose` class.\n\n**Practical Examples:** Custom scrollbar plugin, shadow variants, gradient utilities, CSS grid patterns, container queries.\n\n**Common Mistakes:** Not following plugin order; forgetting to add plugin to config; using `addComponents` for utilities (or vice versa); not handling dark mode.\n\n**Edge Cases:** Plugins may conflict with each other. Use `addBase` for CSS resets. `matchUtilities` for dynamic utilities (e.g., `text-\u003Csize>`).\n\n**Interview Follow-ups:** How do you create a plugin that generates responsive variants? Use `addUtilities` with `variants: ['responsive']` or `matchUtilities` with `respectPrefix: false`. What is the difference between `addUtilities` and `addComponents`? Utilities are higher specificity (usually `!important`?), but in Tailwind both are similar; components are meant for component classes.\n\n**Best Practices:** Prefix custom utilities to avoid conflicts. Use `matchUtilities` for utilities with arguments. Write tests for plugins.\n\n**Responsive Considerations:** Plugins can generate responsive variants by specifying `variants`.\n\n**Accessibility:** No direct.\n\n**Performance Optimization:** Plugins generate only what's used if they use `matchUtilities` with `modifiers`.\n\n**Production Recommendations:** Use official plugins for common needs. Extract custom plugins to npm packages for reuse across projects.\n\n**Latest Tailwind Patterns:** `matchVariant` for advanced container query like variants. `addVariant` with `@supports`.\n\n**Interview Tip:** Show how to create a `fluid-text` plugin that uses `clamp` with viewport units.\n\n**Common Follow-up:** How do you create a plugin that adds a custom variant like `group-has-[:checked]`? Use `addVariant` with `&:has(:checked) .`.\n\n**Real-world Example:** A plugin that adds `text-balance` utility using `text-wrap: balance`. Another plugin adds `scrollbar-gutter` utilities.",[14,305,303],{"id":124,"category":147,"question":333,"answer":334,"level":232,"tags":335},"How do you create reusable UI patterns and component extraction in Tailwind?","**Concept Explanation:** Reusability in Tailwind is achieved through component composition in JS frameworks (React, Vue), or via `@apply` in CSS, or using template partials. The preferred modern approach is to create component functions that return JSX with Tailwind classes, avoiding `@apply` to keep utility-first benefits.\n\n**Internal Behavior:** Using component functions duplicates classes but allows per-instance customization. `@apply` extracts repeated utilities into a single class, reducing markup size but coupling styles and potentially losing Tailwind's benefits (no overrides, specific utilities not generated).\n\n**Syntax Explanation:** React: `const Button = ({ children, variant }) => \u003Cbutton className={`px-4 py-2 rounded ${variant === 'primary' ? 'bg-blue-500' : 'bg-gray-500'}`}>{children}\u003C\u002Fbutton>`. CSS with `@apply`: `.btn-primary { @apply px-4 py-2 bg-blue-500 rounded; }`.\n\n**CSS Examples (with @apply):**\n```css\n.card {\n  @apply bg-white rounded-lg shadow p-4 hover:shadow-lg transition;\n}\n.btn-primary {\n  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;\n}\n```\n\n**Tailwind Examples (component composition):**\n```jsx\n\u002F\u002F React component\n\u003CCard className=\"hover:scale-105\"> \u002F\u002F extendable\n```\n\n**Practical Examples:** Button, Card, Modal, Input, Dropdown components. Using `clsx` or `cn` for conditional classes.\n\n**Common Mistakes:** Overusing `@apply` creating a component library that defeats utility-first purpose. Not allowing extensibility (hardcoded classes). Creating too many tiny components (abstraction leak).\n\n**Edge Cases:** `@apply` cannot be used with pseudo-elements or arbitrary variants in some cases. Performance of `@apply` vs component functions – negligible.\n\n**Interview Follow-ups:** Why does Tailwind recommend avoiding `@apply` for component extraction? It creates abstraction that reduces the flexibility and may cause CSS bloat. What is the alternative? Component composition in framework.\n\n**Best Practices:** Prefer framework components over `@apply`. Use `clsx`\u002F`cn` for conditional merging. Keep components focused and composable.\n\n**Responsive Considerations:** Pass responsive classes as props.\n\n**Accessibility:** Ensure component props include `aria` attributes.\n\n**Performance Optimization:** Component composition has no CSS overhead. `@apply` generates CSS classes that are purged.\n\n**Production Recommendations:** Use `class-variance-authority` (CVA) library for component variants. Store components in a design system folder.\n\n**Latest Tailwind Patterns:** Using `cn()` helper from `tailwind-merge` or `clsx` to merge classes. `cva` for defining variants with type safety.\n\n**Interview Tip:** Demonstrate a button component with variants (primary, secondary, outline) using `cva`.\n\n**Common Follow-up:** How do you override styles of a component that uses `@apply`? You can't easily; that's why composition is better.\n\n**Real-world Example:** A design system's `\u003CButton>` component: accepts `size`, `variant`, `fullWidth`, and passes `className` to allow overrides. Uses `cva` to generate classes based on props.",[14,336,337,338],"component-extraction","reusability","cva",{"id":132,"category":340,"question":341,"answer":342,"level":232,"tags":343},"Forms","What are best practices for styling forms with Tailwind CSS? (Input, checkbox, select, validation)","**Concept Explanation:** Styling forms with Tailwind involves using utilities for border, padding, focus rings, and the official `@tailwindcss\u002Fforms` plugin which resets browser defaults and adds consistent styling across inputs, checkboxes, radios, and selects.\n\n**Internal Behavior:** The forms plugin removes default OS-specific styling and provides a neutral base that can be customized. Focus rings improve accessibility. Validation states (`:valid`, `:invalid`, `:required`) can be styled with Tailwind variants like `invalid:border-red-500`.\n\n**Syntax Explanation:** Input: `\u003Cinput class=\"border rounded px-3 py-2 focus:ring-2 focus:ring-blue-500\">`. Checkbox: `\u003Cinput type=\"checkbox\" class=\"rounded border-gray-300 text-blue-600 focus:ring-blue-500\">`. Select: `\u003Cselect class=\"border rounded px-3 py-2\">`. Validation: `\u003Cinput class=\"border invalid:border-red-500 peer\" required>`.\n\n**CSS Examples:**\n```css\n\u002F* Without plugin *\u002F\ninput { @apply border rounded px-3 py-2; }\ninput:focus { @apply ring-2 ring-blue-500; }\n```\n\n**Tailwind Examples:**\n```html\n\u003Cform class=\"space-y-4\">\n  \u003Clabel class=\"block text-sm font-medium\">Email\u003C\u002Flabel>\n  \u003Cinput type=\"email\" class=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500\">\n  \u003Cinput type=\"checkbox\" class=\"rounded border-gray-300 text-blue-600\">\n  \u003Cselect class=\"block w-full rounded-md border-gray-300\">...\u003C\u002Fselect>\n\u003C\u002Fform>\n```\n\n**Practical Examples:** Login form, registration with validation, multi-step form, custom file input (using `file:` variant).\n\n**Common Mistakes:** Not using `@tailwindcss\u002Fforms` leading to inconsistent native styles. Removing focus ring without replacement. Not styling error messages.\n\n**Edge Cases:** Custom checkboxes and radios: the forms plugin uses `appearance: none` and background images. For dark mode, you need `dark:border-gray-600` etc.\n\n**Interview Follow-ups:** How do you style a custom file input? Use `file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:bg-blue-50`. How to style a form with floating labels? Use `peer` and `peer-placeholder-shown`.\n\n**Best Practices:** Install `@tailwindcss\u002Fforms`. Use consistent spacing (e.g., `space-y-4` for vertical form). Provide clear error states. Use `:focus-visible` for focus rings.\n\n**Responsive Considerations:** Form fields should be full width on mobile (`w-full`), could be auto on desktop.\n\n**Accessibility:** Associate labels with inputs. Use `aria-describedby` for error messages. Ensure focus indicators.\n\n**Performance Optimization:** Minimal impact.\n\n**Production Recommendations:** Customize the forms plugin by setting `strategy: 'class'` in config to avoid global resets if needed.\n\n**Latest Tailwind Patterns:** `peer` and `peer-invalid` for validation styling. `group` for complex states. `file:` variant for file input button.\n\n**Interview Tip:** Demonstrate a form with inline validation using `peer-invalid:border-red-500` and an error message.\n\n**Common Follow-up:** How do you style a checkbox's checked state? The forms plugin styles it automatically; you can override with `checked:bg-blue-600`.\n\n**Real-world Example:** A contact form: name, email, message fields with validation, submit button with hover\u002Ffocus states, and a checkbox for consent.",[14,344,289],"forms",{"id":139,"category":346,"question":347,"answer":348,"level":232,"tags":349},"Tables","How do you style responsive and accessible tables with CSS\u002FTailwind?","**Concept Explanation:** Styling tables involves making them readable, responsive (overflow scroll or card-based on mobile), and accessible (proper headers, captions, zebra striping). Tailwind provides utilities for borders, padding, text alignment, and hover states.\n\n**Internal Behavior:** Tables use `display: table` by default. For responsiveness, wrap in `overflow-x-auto` to allow horizontal scroll on small screens. For complex data, consider `@media` queries to transform table to block layout or use card pattern.\n\n**Syntax Explanation:** HTML: `\u003Ctable class=\"min-w-full divide-y divide-gray-200\">`. Zebra striping: `even:bg-gray-50`. Hover: `hover:bg-gray-100`. Responsive wrapper: `\u003Cdiv class=\"overflow-x-auto\">\u003Ctable class=\"min-w-full\">...`.\n\n**CSS Examples:**\n```css\ntable { @apply min-w-full divide-y divide-gray-200; }\nthead { @apply bg-gray-50; }\ntd { @apply px-6 py-4 whitespace-nowrap; }\n@media (max-width: 640px) {\n  td { @apply block; }\n}\n```\n\n**Tailwind Examples:**\n```html\n\u003Cdiv class=\"overflow-x-auto\">\n  \u003Ctable class=\"min-w-full divide-y divide-gray-200\">\n    \u003Cthead class=\"bg-gray-50\">\n      \u003Ctr>\u003Cth class=\"px-6 py-3 text-left\">Name\u003C\u002Fth>\u003C\u002Ftr>\n    \u003C\u002Fthead>\n    \u003Ctbody class=\"divide-y divide-gray-200\">\n      \u003Ctr class=\"hover:bg-gray-50 even:bg-gray-50\">\n        \u003Ctd class=\"px-6 py-4\">John\u003C\u002Ftd>\n      \u003C\u002Ftr>\n    \u003C\u002Ftbody>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n```\n\n**Practical Examples:** Data tables, pricing tables, comparison tables, schedule grids.\n\n**Common Mistakes:** Not wrapping table in overflow container causing page scroll. Using fixed widths that break on small screens. Forgetting `scope` attribute for accessibility.\n\n**Edge Cases:** Tables with many columns; consider `sticky` headers. Nested tables. Sorting indicators using CSS pseudo-elements.\n\n**Interview Follow-ups:** How do you make a table with sticky header? `thead { @apply sticky top-0 bg-white; }`. How to implement horizontal scroll with first column fixed? Use `position: sticky` on first th.\n\n**Best Practices:** Use `overflow-x-auto` for mobile. Add `caption` for accessibility. Use `sorting` icons via `::after`. Keep zebra striping for readability.\n\n**Responsive Considerations:** On very small screens, consider converting table rows to card-like display using flex\u002Fgrid in media query.\n\n**Accessibility:** Use `\u003Cth>` with `scope=\"col\"` or `scope=\"row\"`. Add `aria-sort` if sorting. Use `\u003Ccaption>` or `aria-label`.\n\n**Performance Optimization:** Large tables with many cells may cause reflow; use `contain: strict`.\n\n**Production Recommendations:** Use Tailwind's table utilities. For complex interactive tables, consider a data table library (TanStack Table).\n\n**Latest Tailwind Patterns:** `whitespace-nowrap` for headers, `text-ellipsis` for truncation. `table-auto` vs `table-fixed`.\n\n**Interview Tip:** Demonstrate a responsive table that becomes a card list on mobile using media query and flex.\n\n**Common Follow-up:** How to make a table row clickable? Wrap with `tr` and `cursor-pointer`, but ensure keyboard accessibility.\n\n**Real-world Example:** An admin dashboard with user list: table with overflow scroll, sticky header, zebra rows, hover effect, and action buttons.",[350,12,14,86,289],"tables",{"id":146,"category":352,"question":353,"answer":354,"level":232,"tags":355},"Layouts","How do you create common layout systems (holy grail, sidebar, sticky footer, masonry) with modern CSS?","**Concept Explanation:** Layout systems solve common web patterns: Holy Grail (header, footer, 3 columns), sidebar (main + aside), sticky footer (footer sticks to bottom even when content short), masonry (uneven grid). Modern CSS uses Grid and Flexbox.\n\n**Internal Behavior:** Grid excels at two-dimensional layouts. Flexbox for one-dimensional. Sticky footer achieved via `min-height: 100vh` and `grid-template-rows: auto 1fr auto`. Masonry can be done with CSS Grid but limited; better with CSS Grid `auto-rows` + `dense` or use `columns` property.\n\n**Syntax Explanation:** Holy Grail: `display: grid; grid-template: auto 1fr auto \u002F 200px 1fr 200px;`. Sidebar: `grid-template-columns: 1fr 300px;`. Sticky footer: `min-h-screen grid grid-rows-[auto_1fr_auto]`. Masonry: `columns-2 md:columns-3 gap-4` or Grid with `grid-template-rows: masonry` (experimental).\n\n**CSS Examples:**\n```css\n\u002F* Holy Grail *\u002F\nbody { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }\n.container { display: grid; grid-template-columns: 200px 1fr 200px; }\n\u002F* Sidebar layout *\u002F\n.dashboard { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; }\n```\n\n**Tailwind Examples:**\n```html\n\u003C!-- Sticky footer -->\n\u003Cbody class=\"min-h-screen grid grid-rows-[auto_1fr_auto]\">\n  \u003Cheader>Header\u003C\u002Fheader>\n  \u003Cmain>Content\u003C\u002Fmain>\n  \u003Cfooter>Footer\u003C\u002Ffooter>\n\u003C\u002Fbody>\n\u003C!-- Sidebar -->\n\u003Cdiv class=\"grid grid-cols-[250px_1fr] gap-4\">\n  \u003Caside>Sidebar\u003C\u002Faside>\n  \u003Cmain>Content\u003C\u002Fmain>\n\u003C\u002Fdiv>\n\u003C!-- Masonry using columns -->\n\u003Cdiv class=\"columns-2 md:columns-3 gap-4\">\n  \u003Cdiv class=\"break-inside-avoid mb-4\">Item 1\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n**Practical Examples:** Blog layout with sidebar, admin dashboard, product gallery masonry, documentation site with left nav, right TOC.\n\n**Common Mistakes:** Using `height: 100%` on body without `height: 100%` on html. Not handling overflow on main content. For masonry, using Grid `dense` can reorder items visually.\n\n**Edge Cases:** Sticky footer with dynamic content height; works well. Masonry in `columns` may break if items have different heights; `break-inside-avoid` helps.\n\n**Interview Follow-ups:** How does `min-height: 100vh` differ from `height: 100%`? `vh` relative to viewport, `%` relative to parent. What is the masonry layout support in CSS? Currently experimental, use `columns` or JS.\n\n**Best Practices:** Use Grid for page layout, Flex for component layout. For sticky footer, use `min-h-screen` on body. For masonry, prefer `columns` for simple cases, or use JS for complex.\n\n**Responsive Considerations:** Sidebar can become full width on mobile: `grid-cols-1 md:grid-cols-[250px_1fr]`.\n\n**Accessibility:** Ensure logical DOM order; grid reordering is visual only.\n\n**Performance Optimization:** Grid and Flex are performant.\n\n**Production Recommendations:** For masonry, use `columns` with `break-inside-avoid` for simple photo galleries. For complex, use a library.\n\n**Latest Tailwind Patterns:** `grid-rows-[auto_1fr_auto]` for sticky footer. `masonry` layout using `columns` utilities. Container queries for adaptive sidebar.\n\n**Interview Tip:** Demonstrate sticky footer with `grid-rows-[auto_1fr_auto]`.\n\n**Common Follow-up:** How do you implement a sidebar that can be hidden? Use `hidden md:grid` or `transition-transform` off-canvas.\n\n**Real-world Example:** A blog: header, main with article and right sidebar (TOC), footer. On mobile, sidebar stacks below article.",[356,72,357,358,359,14],"layout","flex","sticky-footer","masonry",{"id":153,"category":361,"question":362,"answer":363,"level":232,"tags":364},"Sticky Layouts","How do you implement sticky elements (headers, sidebars, table columns) with CSS?","**Concept Explanation:** `position: sticky` creates elements that behave as relative until a scroll threshold, then become fixed. Useful for headers, sidebar sections, table headers, first column. Requires a containing block with overflow not hidden.\n\n**Internal Behavior:** Sticky element is scrolled within its parent container. It sticks to the specified edge (`top: 0`) when parent scrolls past. The parent must not have `overflow: hidden`, and sticky element cannot be taller than its parent.\n\n**Syntax Explanation:** `position: sticky; top: 0;`. For horizontal sticky (table column): `left: 0;`. Tailwind: `sticky top-0`, `sticky left-0`.\n\n**CSS Examples:**\n```css\nheader { position: sticky; top: 0; background: white; z-index: 10; }\n.sidebar-section { position: sticky; top: 20px; }\ntable th:first-child { position: sticky; left: 0; background: white; }\n```\n\n**Tailwind Examples:**\n```html\n\u003Cheader class=\"sticky top-0 bg-white z-10\">Sticky Nav\u003C\u002Fheader>\n\u003Caside class=\"space-y-4\">\n  \u003Cdiv class=\"sticky top-4\">Sticky sidebar widget\u003C\u002Fdiv>\n\u003C\u002Faside>\n\u003Cdiv class=\"overflow-x-auto\">\n  \u003Ctable>\n    \u003Cth class=\"sticky left-0 bg-white\">Fixed Column\u003C\u002Fth>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n```\n\n**Practical Examples:** Sticky navigation bar, sticky table headers, sticky product summary in sidebar, sticky CTA button, sticky table first column.\n\n**Common Mistakes:** Forgetting `top`\u002F`bottom` value; parent with `overflow: hidden`; nested sticky elements not working (parent sticky can limit child); z-index stacking context issues.\n\n**Edge Cases:** In Safari, sticky inside `display: grid` can behave oddly; use `align-self: start`. Multiple sticky elements compete for space. Sticky inside a flexbox with `align-items: stretch` may not work.\n\n**Interview Follow-ups:** How does sticky differ from fixed? Sticky scrolls with container until threshold, fixed always relative to viewport. Why does sticky sometimes not work? Check overflow hidden on any ancestor. How to make a table header sticky? Use `sticky top-0` on `th`.\n\n**Best Practices:** Always set `top: 0` (or other offset). Ensure sufficient z-index. Test on all browsers. Provide fallback for older browsers (just normal relative).\n\n**Responsive Considerations:** On mobile, sticky elements may take too much space; consider disabling sticky at small breakpoints: `sticky md:top-0` but base not sticky.\n\n**Accessibility:** Ensure sticky headers don't trap focus or hide content behind them. Use `scroll-padding-top` on container to offset anchor links.\n\n**Performance Optimization:** Sticky recalculates on scroll; avoid many sticky elements.\n\n**Production Recommendations:** Use `scroll-margin-top` to offset anchor links when sticky header obscures them.\n\n**Latest Tailwind Patterns:** `sticky` with `inset-*`, `scroll-mt-*` utilities. `group\u002Fsticky` etc.\n\n**Interview Tip:** Demonstrate a table with both sticky header and sticky first column.\n\n**Common Follow-up:** How to make a sticky sidebar that stops before footer? Use `@supports` with `position: sticky` and manage height; or use `align-self: start` in grid.\n\n**Real-world Example:** An e-commerce product page: sticky add-to-cart sidebar, sticky header, sticky product images on scroll.",[365,366,12,14],"sticky","position",{"id":160,"category":368,"question":369,"answer":370,"level":232,"tags":371},"Sidebar Layouts","How to implement responsive sidebar layouts (collapsible, off-canvas, persistent)?","**Concept Explanation:** Sidebar layouts can be persistent (always visible), collapsible (expand\u002Fcollapse with toggle), or off-canvas (hidden off-screen, slides in on mobile). Implementation uses CSS Grid\u002FFlexbox, transitions, and JavaScript for toggle state.\n\n**Internal Behavior:** Persistent: `grid grid-cols-[250px_1fr]`. Collapsible: toggle a class that changes `grid-template-columns` from `250px` to `0` or `auto`, with transition on width (not performant) or use `transform` for smooth. Off-canvas: absolute positioning, `translate-x-full` hidden, transform open.\n\n**Syntax Explanation:** Persistent Tailwind: `\u003Cdiv class=\"grid grid-cols-[250px_1fr]\">`. Collapsible: `\u003Cdiv class=\"grid\" [class.collapsed]=\"collapsed\">` with `[style.gridTemplateColumns]=\"collapsed ? '0 1fr' : '250px 1fr'\"`. Off-canvas: `\u003Caside class=\"fixed inset-y-0 left-0 transform -translate-x-full transition\">`.\n\n**CSS Examples:**\n```css\n.sidebar { transition: transform 0.3s ease; transform: translateX(-100%); }\n.sidebar.open { transform: translateX(0); }\n```\n\n**Tailwind Examples:**\n```html\n\u003C!-- Persistent -->\n\u003Cdiv class=\"grid grid-cols-[250px_1fr]\">\n  \u003Caside>Sidebar\u003C\u002Faside>\n  \u003Cmain>Content\u003C\u002Fmain>\n\u003C\u002Fdiv>\n\u003C!-- Off-canvas -->\n\u003Caside class=\"fixed top-0 left-0 h-full w-64 bg-white transform -translate-x-full transition duration-300 peer-checked:translate-x-0\">\n  \u003Cinput type=\"checkbox\" id=\"menu\" class=\"peer hidden\">\n  \u003Clabel for=\"menu\">Menu\u003C\u002Flabel>\n\u003C\u002Faside>\n```\n\n**Practical Examples:** Admin dashboard, documentation site, messaging app, file manager.\n\n**Common Mistakes:** For off-canvas, not handling overlay backdrop; not preventing body scroll when sidebar open; transition on `width` causing performance issues.\n\n**Edge Cases:** In persistent layout, sidebar may break on mobile; use `md:grid-cols-[250px_1fr] grid-cols-1`. Collapsible using `width` transition may cause content reflow; prefer `transform`.\n\n**Interview Follow-ups:** How to make sidebar collapsible with smooth animation? Use `transform` on the sidebar container or change grid template with CSS custom properties. What about accessibility? Manage focus trapping when open.\n\n**Best Practices:** For responsive, default to off-canvas on mobile, persistent on desktop. Use `transform` for animation. Add overlay with backdrop and close on click.\n\n**Responsive Considerations:** Use `md:grid` for persistent desktop, `block` for mobile off-canvas.\n\n**Accessibility:** Trap focus within off-canvas when open. Add `aria-expanded`. Ensure keyboard can close.\n\n**Performance Optimization:** `transform` animations use compositor, no reflow.\n\n**Production Recommendations:** Use headless UI or Radix UI for accessible off-canvas. Tailwind for styling.\n\n**Latest Tailwind Patterns:** `peer` and `peer-checked` for toggle without JS. `group` for hover expand. `motion-safe:transition-transform`.\n\n**Interview Tip:** Create an off-canvas sidebar that opens with a hamburger menu using `peer-checked`.\n\n**Common Follow-up:** How do you persist sidebar state across page loads? Use localStorage to remember collapsed state.\n\n**Real-world Example:** A dashboard: desktop has persistent sidebar, tablet has collapsible (icon + tooltip), mobile has off-canvas hamburger menu.",[372,356,86,14,373],"sidebar","off-canvas",[375,386,391,396,404,411,418,426,432,440,448,455,461,467,473,481,486,490,497,504],{"id":6,"category":376,"question":377,"answer":378,"level":234,"tags":379},"Rendering Pipeline","Explain the CSS rendering pipeline (DOM, CSSOM, Render Tree, Layout, Paint, Composite) and how it impacts performance.","Concept Explanation: The browser rendering pipeline converts HTML\u002FCSS into pixels on screen. Steps: DOM (HTML parsed), CSSOM (CSS parsed), Render Tree (DOM + CSSOM combined, excluding display: none), Layout (calculates geometry), Paint (fills pixels), Composite (layers combined on GPU).\n\nInternal Behavior: The browser builds DOM and CSSOM concurrently. Render Tree attaches computed styles to visible nodes. Layout (reflow) computes box positions and sizes. Paint (repaint) fills pixels. Compositing layers are sent to GPU. Changes to different properties trigger different pipeline stages.\n\nSyntax Explanation: CSS properties that trigger Layout: width, height, margin, top, position. Paint: color, background, box-shadow. Composite only: transform, opacity, filter. JavaScript can force synchronous layout (layout thrashing).\n\nCSS Examples:\ncss\n\u002F* Bad - triggers layout *\u002F\n.element { width: 200px; margin: 10px; }\n\u002F* Good - composite only *\u002F\n.element { transform: translateX(100px); opacity: 0.5; }\n\n\nTailwind Examples: Tailwind encourages using transform and opacity for animations: transition-transform, duration-300, hover:scale-105. Avoid animating width or margin.\n\nPractical Examples: Animating a card on hover using transform: scale() instead of width change. Off-canvas menu using transform: translateX() rather than left property.\n\nCommon Mistakes: Animating width, height, left, top causing reflow. Using display: none\u002Fblock in animations. Forgetting will-change. Excessive nested layout changes.\n\nEdge Cases: transform: translateZ(0) promotes layer but may increase memory. Fixed positioning triggers reflow on scroll in some browsers. will-change overuse causes memory bloat.\n\nInterview Follow-ups: Which properties trigger layout vs paint vs composite? How do you avoid layout thrashing? Explain requestAnimationFrame for batching reads\u002Fwrites.\n\nBest Practices: Use transform and opacity for animations. Group DOM reads and writes. Use will-change sparingly. Leverage contain property.\n\nResponsive Considerations: Responsive design may cause layout recalc on resize; optimize with container queries.\n\nAccessibility: prefers-reduced-motion reduces animation load.\n\nPerformance Optimization: Use CSS content-visibility: auto for off-screen sections. Avoid complex selectors. Use contain: layout style paint.\n\nProduction Recommendations: Profile with Performance tab in DevTools. Minimize layout thrashing. Use Tailwind's transition utilities that default to composite properties.\n\nLatest Tailwind Patterns: motion-safe:transition-transform ensures animations only where allowed. Arbitrary will-change-[transform].\n\nInterview Tip: Draw the pipeline and explain which properties trigger which stage.\n\nCommon Follow-up: How do you debug layout thrashing? Use Timeline\u002FPerformance panel, look for purple (layout) and green (paint) bars.\n\nReal-world Example: A carousel that uses transform: translateX() for sliding, not margin-left. This stays in composite, achieving 60fps.",[380,381,382,383,384,385],"rendering","pipeline","performance","reflow","repaint","composite",{"id":16,"category":376,"question":387,"answer":388,"level":234,"tags":389},"What are reflow and repaint? Explain what causes them and how to minimize them.","Concept Explanation: Reflow (layout) is the process of recalculating element positions and geometries. Repaint is redrawing pixels without changing layout. Reflow is expensive and triggers repaint. Repaint alone is cheaper. Minimizing both improves responsiveness.\n\nInternal Behavior: Reflow occurs when DOM changes affect geometry: adding\u002Fremoving elements, changing dimensions, font changes, scroll, resize, CSS property changes (width, margin, padding). Repaint occurs on color, background, visibility changes. Browsers batch operations but certain properties force synchronous reflow.\n\nSyntax Explanation: Properties causing reflow: width, height, margin, padding, border, display, position, float, font-size, top, left, offset*, scroll*, client*. Repaint only: color, background-color, visibility, outline, box-shadow (sometimes).\n\nCSS Examples:\ncss\n\u002F* Triggers reflow *\u002F\n.width-change { width: 300px; }\n\u002F* Triggers repaint only *\u002F\n.color-change { color: red; }\n\n\nTailwind Examples: Using hover:bg-blue-500 triggers repaint (cheap). Using hover:w-32 triggers reflow (expensive). Prefer hover:scale-105 over hover:w-32.\n\nPractical Examples: Adding a class to a dropdown that changes display: block (reflow). Changing text color on hover (repaint). Animating transform (no reflow\u002Frepaint, just composite).\n\nCommon Mistakes: Reading layout properties (e.g., offsetHeight) after DOM mutations without batching. Animating margin or padding. Frequent DOM manipulation in loops.\n\nEdge Cases: visibility: hidden triggers repaint (element still occupies space). display: none triggers reflow (removes from layout). opacity: 0 triggers repaint\u002Fcomposite.\n\nInterview Follow-ups: What forces synchronous reflow? Reading offsetHeight, getComputedStyle, etc. after unscheduled DOM changes. How to batch? Use requestAnimationFrame or CSS contain.\n\nBest Practices: Use CSS transforms and opacity. Batch DOM reads before writes. Use documentFragment. Avoid inline styles. Use will-change but sparingly.\n\nResponsive Considerations: Resize events cause reflow; throttle with requestAnimationFrame.\n\nAccessibility: No direct impact.\n\nPerformance Optimization: Use content-visibility: auto to skip layout off-screen. Use contain: layout to isolate subtree.\n\nProduction Recommendations: Profile with Lighthouse. Use React\u002FVue virtual DOM to batch updates. Leverage CSS Grid\u002FFlex (efficient).\n\nLatest Tailwind Patterns: contain-layout, contain-paint, contain-strict utilities (Tailwind plugin).\n\nInterview Tip: Demonstrate measuring performance with DevTools and explaining colored bars.\n\nCommon Follow-up: How do you fix layout thrashing? Cache layout reads before writes.\n\nReal-world Example: A infinite scroll component: reading scrollTop then adding items. To avoid thrashing, read scrollTop once, then batch all DOM additions, then re-read if needed.",[383,384,382,390],"layout-thrashing",{"id":23,"category":376,"question":392,"answer":393,"level":234,"tags":394},"What is layout thrashing and how to avoid it in JavaScript-heavy applications?","Concept Explanation: Layout thrashing occurs when JavaScript repeatedly reads layout properties (e.g., offsetHeight) and then modifies styles, forcing the browser to reflow synchronously between each read\u002Fwrite. This creates a performance death spiral.\n\nInternal Behavior: Normally, browser batches layout updates. But when you read a layout property (like offsetTop) after a style change but before the next frame, the browser must perform a synchronous reflow to return accurate values. Multiple alternating read\u002Fwrite cycles cause multiple forced reflows.\n\nSyntax Explanation: Bad: element.style.width = '100px'; let height = element.offsetHeight; element.style.height = height + 'px'; (reflow after first write, then second write may trigger another). Good: let height = element.offsetHeight; element.style.width = '100px'; element.style.height = height + 'px'; (reads before writes).\n\nCSS Examples: No direct CSS.\n\nTailwind Examples: Not directly related but using Tailwind classes in JavaScript (classList.add, remove) can cause thrashing if interleaved with reads.\n\nPractical Examples: Animating many elements based on each other's positions. Resize handler that reads dimensions then adjusts other elements.\n\nCommon Mistakes: Reading scrollTop in scroll event without throttling and then modifying layout. Using getBoundingClientRect inside a loop. Forgetting that offsetHeight forces reflow.\n\nEdge Cases: Even reading window.getComputedStyle can force reflow. Modern browsers optimize some cases but not all.\n\nInterview Follow-ups: How does requestAnimationFrame help? It batches reads\u002Fwrites before next paint. What is the difference between setTimeout and requestAnimationFrame? rAF syncs with display refresh. How does CSS contain help? Isolates layout recalculation.\n\nBest Practices: Separate read and write phases. Use requestAnimationFrame to batch. Use ResizeObserver instead of listening to resize. Cache layout values.\n\nResponsive Considerations: Not specific.\n\nAccessibility: No impact.\n\nPerformance Optimization: Use will-change to promote layers. Use CSS transitions instead of JS animation where possible.\n\nProduction Recommendations: Use libraries like fastdom to batch reads\u002Fwrites. In React, use useLayoutEffect with caution.\n\nLatest Tailwind Patterns: Not directly applicable.\n\nInterview Tip: Write a simple example of thrashing and then fix it.\n\nCommon Follow-up: How would you implement a smooth scroll effect without thrashing? Cache scroll position, apply styles via CSS transforms.\n\nReal-world Example: A Masonry layout that positions images on load: read all image dimensions first, then set positions in a second loop, avoiding alternating reads\u002Fwrites.",[390,382,395,383],"javascript",{"id":31,"category":376,"question":397,"answer":398,"level":234,"tags":399},"How does GPU acceleration work in CSS and how to enable it?","Concept Explanation: GPU acceleration offloads compositing and animation to the Graphics Processing Unit, freeing the CPU for other tasks. CSS properties that create their own compositor layer (e.g., transform, opacity, filter) are GPU-accelerated, resulting in smooth 60fps animations.\n\nInternal Behavior: When the browser detects properties that benefit from GPU, it creates a new compositor layer. Layers are textures sent to GPU. The GPU composites layers with transforms\u002Fopacity without touching layout or paint. Over-layering can cause memory issues.\n\nSyntax Explanation: Enable via transform: translateZ(0), will-change: transform, or using 3D transforms (translate3d). Also opacity \u003C 1, filter, backface-visibility: hidden. Tailwind: transform-gpu, will-change-transform.\n\nCSS Examples:\ncss\n\u002F* Forces GPU layer *\u002F\n.accelerate {\n transform: translateZ(0);\n will-change: transform;\n}\n.animate {\n transition: transform 0.2s;\n}\n.animate:hover {\n transform: scale(1.1);\n}\n\n\nTailwind Examples:\nhtml\n\u003Cdiv class=\"transform-gpu will-change-transform transition-transform hover:scale-105\">\n GPU accelerated\n\u003C\u002Fdiv>\n\n\nPractical Examples: Smooth parallax scrolling, draggable elements, high-performance carousel, hover card effects.\n\nCommon Mistakes: Overusing transform: translateZ(0) on hundreds of elements causing memory bloat. Expecting will-change to magically fix performance. Not removing will-change after animation.\n\nEdge Cases: filter animations are GPU accelerated but can be expensive. backdrop-filter is also GPU but heavy. Layers created by transform may cause text blur in Safari.\n\nInterview Follow-ups: What is the cost of GPU layers? Memory and upload time. How many layers are too many? Depends on device; hundreds may cause issues. How to debug layers? Chrome DevTools > Layers panel.\n\nBest Practices: Use transform and opacity for animations. Promote only elements that animate frequently. Remove will-change after animation ends.\n\nResponsive Considerations: Not specific.\n\nAccessibility: prefers-reduced-motion should disable animations even if GPU accelerated.\n\nPerformance Optimization: Use contain: paint and will-change together. Limit layer count.\n\nProduction Recommendations: Profile with FPS meter. Use transform: translateZ(0) only when needed; JIT create layers.\n\nLatest Tailwind Patterns: transform-gpu utility adds transform: translateZ(0). will-change-[transform,opacity] arbitrary values.\n\nInterview Tip: Explain that not all CSS animations need GPU; simple transitions are fine.\n\nCommon Follow-up: Why does transform: translateZ(0) work? It forces 3D context, creating a layer.\n\nReal-world Example: A sticky sidebar that animates on scroll: using transform: translateY() with will-change: transform ensures smooth scrolling without jank.",[400,401,402,382,403],"gpu","acceleration","compositing","will-change",{"id":38,"category":405,"question":406,"answer":407,"level":234,"tags":408},"Responsive Architecture","How do you architect advanced responsive systems that go beyond breakpoints (intrinsic design, fluid layouts, container queries)?","Concept Explanation: Advanced responsive architecture moves beyond fixed breakpoints to intrinsic design where components adapt based on their content and container. It combines fluid typography (clamp), intrinsic sizing (min-content, max-content), container queries, and macro\u002Fmicro layout separation.\n\nInternal Behavior: Intrinsic design uses CSS properties like width: fit-content and min()\u002Fmax() to let content determine layout. Container queries allow components to respond to parent container width. Fluid typography uses clamp() with viewport units. The result is a system that works at any screen size without media queries.\n\nSyntax Explanation: Fluid type: font-size: clamp(1rem, 2vw + 0.5rem, 2rem). Container query: @container (min-width: 300px) { .card { flex-direction: row; } }. Intrinsic: width: min(100%, 400px); margin-inline: auto;.\n\nCSS Examples:\ncss\n\u002F* Fluid grid without media queries *\u002F\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));\n gap: clamp(1rem, 3vw, 2rem);\n}\n\u002F* Container query card *\u002F\n.card-container { container-type: inline-size; }\n@container (width > 400px) {\n .card { display: flex; }\n}\n\n\nTailwind Examples: Container queries via plugin: @md:flex. Fluid typography: text-[clamp(1rem,2vw,2rem)]. Intrinsic width: w-fit, min-w-0, max-w-full.\n\nPractical Examples: A card grid that adjusts column count based on available space without breakpoints. A sidebar that becomes horizontal when narrow. A dashboard where widgets adapt independently.\n\nCommon Mistakes: Overusing container queries where media queries are simpler. Not providing fallbacks for older browsers. Fluid typography that becomes too small on zoom.\n\nEdge Cases: Container queries not supported in older Safari; use @supports feature detection. auto-fit may cause empty columns.\n\nInterview Follow-ups: How does intrinsic design differ from responsive design? Intrinsic is content-driven, responsive is viewport-driven. What is the role of min() and max()? To cap values. Explain fit-content vs max-content.\n\nBest Practices: Use macro layout (page structure) with media queries, micro layout (components) with container queries. Use fluid units for spacing and typography. Combine with CSS Grid auto-fit.\n\nResponsive Considerations: This is the core.\n\nAccessibility: Ensure clamp min font size is at least 16px for readability.\n\nPerformance Optimization: Container queries have some overhead but acceptable.\n\nProduction Recommendations: Use Tailwind's container queries plugin. Use postcss-preset-env for future CSS. Test on supported browsers.\n\nLatest Tailwind Patterns: @ variants for container queries. fluid custom utilities using clamp.\n\nInterview Tip: Demonstrate a card that changes layout without media queries using container query.\n\nCommon Follow-up: How do you handle older browsers? Provide fallback layout using CSS Grid or Flex that works without container queries.\n\nReal-world Example: A blog with a main content area and sidebar. The sidebar uses container queries on its own container to display related articles as a grid when wide, or list when narrow, independent of viewport.",[86,409,276,277,410],"intrinsic-design","advanced-css",{"id":46,"category":412,"question":413,"answer":414,"level":234,"tags":415},"Design Systems","How do you build a scalable design system using CSS custom properties and Tailwind?","Concept Explanation: A design system includes tokens (colors, spacing, typography), components, and patterns. Using CSS custom properties (variables) for tokens allows runtime theming. Tailwind can reference these variables, combining design system constraints with utility flexibility.\n\nInternal Behavior: Define design tokens as CSS variables in :root. Tailwind config references these variables: colors: { primary: 'var(--color-primary)' }. This generates utilities that use the variables. Changing variables at runtime updates all components.\n\nSyntax Explanation: :root { --color-primary: #3b82f6; --spacing-md: 1rem; }. Tailwind config: theme: { extend: { colors: { primary: 'var(--color-primary)' }, spacing: { md: 'var(--spacing-md)' } } }. Use in components: bg-primary, p-md.\n\nCSS Examples:\ncss\n:root {\n --font-sans: 'Inter', system-ui;\n --radius-md: 0.375rem;\n}\n\n\nTailwind Examples:\njs\n\u002F\u002F tailwind.config.js\nmodule.exports = {\n theme: {\n extend: {\n fontFamily: { sans: 'var(--font-sans)' },\n borderRadius: { md: 'var(--radius-md)' }\n }\n }\n}\n\n\nPractical Examples: Multi-brand white-labeling (set variables per brand). Light\u002Fdark mode via variable switching. Theme editor where users pick colors.\n\nCommon Mistakes: Not providing fallback values. Overriding variables inline without cascade consideration. Using too many variables causing performance.\n\nEdge Cases: CSS variables cannot be used in media query ranges (except inside). Some older browsers don't support CSS variables.\n\nInterview Follow-ups: How do you version design tokens? Use npm package with CSS files. How to enforce design constraints? Use Tailwind's theme configuration and linting.\n\nBest Practices: Keep tokens in a separate CSS file. Generate Tailwind config from tokens (e.g., via JSON). Use @apply only for complex components.\n\nResponsive Considerations: Variables can be changed inside media queries for responsive theming.\n\nAccessibility: Ensure high contrast via variable overrides.\n\nPerformance Optimization: Minimal overhead.\n\nProduction Recommendations: Use postcss-custom-properties for fallbacks. Use style-dictionary to build tokens. Expose variables for customer theming.\n\nLatest Tailwind Patterns: Using theme function inside config to reference variables. safeList for dynamic token-based classes.\n\nInterview Tip: Show how a variable change updates all components via JavaScript.\n\nCommon Follow-up: How do you handle fallbacks for browsers without CSS variables? Use postcss-custom-properties to inline fallback values.\n\nReal-world Example: A SaaS product with per-organization theming: Server sends CSS variables for brand colors, Tailwind utilities bg-primary adapt instantly.",[416,316,14,417],"design-systems","tokens",{"id":53,"category":412,"question":419,"answer":420,"level":234,"tags":421},"What are design tokens and how do you manage them across multiple platforms?","Concept Explanation: Design tokens are platform-agnostic variables that store design decisions (color, spacing, typography). They are the single source of truth for a design system, enabling consistency across web, mobile, and native apps.\n\nInternal Behavior: Tokens are defined in a format like JSON or YAML, then transformed via tools (Style Dictionary, Theo) into platform-specific code: CSS variables, SCSS variables, JavaScript objects, Android XML, iOS Swift.\n\nSyntax Explanation (JSON):\njson\n{\n \"color\": {\n \"primary\": { \"value\": \"#3b82f6\", \"type\": \"color\" },\n \"spacing\": { \"md\": { \"value\": \"16px\", \"type\": \"spacing\" } }\n }\n}\n\nBuild command transforms into CSS: --color-primary: #3b82f6;.\n\nCSS Examples: Output CSS variables or Tailwind config.\n\nTailwind Examples: Import tokens into tailwind.config.js:\njs\nconst tokens = require('.\u002Ftokens.json');\nmodule.exports = { theme: { extend: { colors: tokens.color } } };\n\n\nPractical Examples: Design system used by web, React Native, Android, iOS apps. Centralized token update across all platforms.\n\nCommon Mistakes: Tokens that are too granular (hard to maintain) or too coarse (not useful). Not including documentation. Not versioning tokens.\n\nEdge Cases: Platform-specific token values (e.g., box-shadow not supported on mobile). Different naming conventions.\n\nInterview Follow-ups: What tools manage tokens? Style Dictionary, Figma Tokens. How to integrate with Figma? Use plugins. How to handle responsive tokens? Use different token sets for breakpoints.\n\nBest Practices: Keep tokens semantic (color-background-brand not color-blue-500). Version tokens. Automate build process. Include tests.\n\nResponsive Considerations: Tokens can have breakpoint variants.\n\nAccessibility: Tokens can include contrast requirements.\n\nPerformance Optimization: Transform only needed tokens.\n\nProduction Recommendations: Use Style Dictionary. Store tokens in version control. Automate deployment of CSS variables.\n\nLatest Tailwind Patterns: Tailwind can consume tokens via the theme object. Use presets to share token config.\n\nInterview Tip: Describe a workflow where designer updates Figma, exports tokens, builds CSS, and updates Tailwind config.\n\nCommon Follow-up: How do you handle deprecated tokens? Mark in schema, provide migration warnings.\n\nReal-world Example: A large e-commerce company with web, mobile app, and in-store kiosks using same design tokens. One change to spacing-md updates all platforms.",[422,423,424,425],"design-tokens","design-system","multi-platform","style-dictionary",{"id":60,"category":427,"question":428,"answer":429,"level":234,"tags":430},"Scalable CSS","What are scalable CSS architectures for large enterprises (CSS Modules, CSS-in-JS, Tailwind)? Compare and contrast.","Concept Explanation: Scalable CSS architectures handle large teams, many components, and performance. Options: CSS Modules (scoped classes), CSS-in-JS (runtime styles), Tailwind (utility-first). Each solves different problems.\n\nInternal Behavior: CSS Modules generate unique class names at build time, avoiding conflicts. CSS-in-JS (styled-components, Emotion) generates styles at runtime (or compile time) and injects into DOM. Tailwind uses build-time purging with many utility classes.\n\nSyntax Explanation: CSS Modules: import styles from '.\u002FButton.module.css'; \u003Cdiv className={styles.button}>. CSS-in-JS: const Button = styled.button; \u003CButton>. Tailwind: \u003Cbutton className=\"bg-blue-500\">.\n\nCSS Examples:\ncss\n\u002F* CSS Modules *\u002F\n.button_abc123 { background: blue; }\n\n\nTailwind Examples: Traditional.\n\nPractical Examples: Enterprise monorepo: choose based on team preference and performance needs.\n\nCommon Mistakes: CSS-in-JS runtime overhead in large apps. CSS Modules global styles leak. Tailwind long class strings.\n\nEdge Cases: CSS-in-JS with SSR requires critical CSS extraction. Tailwind's class strings can get long. CSS Modules composition is limited.\n\nInterview Follow-ups: Which has best performance? Build-time solutions (CSS Modules, Tailwind). Which offers dynamic theming best? CSS-in-JS or CSS variables. Which is easiest for new developers? Tailwind.\n\nBest Practices: For static design systems, Tailwind or CSS Modules. For heavily dynamic styles (theming, props), CSS-in-JS. For large teams, enforce one approach.\n\nResponsive Considerations: All support responsive.\n\nAccessibility: All fine.\n\nPerformance Optimization: CSS Modules and Tailwind produce static CSS; CSS-in-JS may use @emotion\u002Freact with zero runtime.\n\nProduction Recommendations: Use Tailwind for new projects for productivity and size. Use CSS Modules for legacy. Avoid runtime CSS-in-JS in performance-critical apps.\n\nLatest Tailwind Patterns: Tailwind with @apply and CSS Modules hybrid.\n\nInterview Tip: Compare build vs runtime vs utility tradeoffs.\n\nCommon Follow-up: How do you decide for a specific project? Evaluate team size, performance needs, theming complexity.\n\nReal-world Example: A large enterprise: uses Tailwind for marketing site, CSS Modules for legacy dashboard, and styled-components for component library requiring runtime theming.",[164,261,431,14,248],"css-in-js",{"id":67,"category":285,"question":433,"answer":434,"level":234,"tags":435},"How do you implement advanced accessibility features (focus management, ARIA attributes, skip links, high contrast) in CSS?","Concept Explanation: Advanced accessibility goes beyond color contrast. Focus management ensures keyboard navigability. ARIA attributes work with CSS (e.g., [aria-expanded] styles). Skip links allow bypassing navigation. High contrast mode support uses forced-colors and prefers-contrast media queries.\n\nInternal Behavior: :focus-visible shows focus only when needed (keyboard). forced-colors: active detects Windows High Contrast Mode; use border instead of outline or box-shadow. ARIA attributes as CSS selectors allow state-based styling without JavaScript.\n\nSyntax Explanation: Focus: :focus-visible { outline: 2px solid; }. High contrast: @media (forced-colors: active) { .card { border: 1px solid CanvasText; } }. ARIA: [aria-expanded=\"true\"] .menu { display: block; }.\n\nCSS Examples:\ncss\n\u002F* Skip link *\u002F\n.skip-link {\n position: absolute; left: -9999px;\n}\n.skip-link:focus {\n left: 0; top: 0; background: white; padding: 8px;\n}\n\u002F* High contrast safe *\u002F\n.button {\n border: 1px solid transparent;\n}\n@media (forced-colors: active) {\n .button { border-color: CanvasText; }\n}\n\n\nTailwind Examples: Focus: focus-visible:ring-2. ARIA: aria-expanded:rotate-180. Skip link: sr-only focus:not-sr-only. High contrast: forced-colors:border-black (requires arbitrary variant).\n\nPractical Examples: Modal focus trap, dropdown arrow rotation via aria-expanded, skip to main content, high contrast mode adjustments.\n\nCommon Mistakes: Removing outline without replacement. Using :focus for mouse clicks. Not testing in high contrast mode. Forgetting aria-expanded styling.\n\nEdge Cases: :focus-visible not supported in older Safari; use :focus fallback. forced-colors media query not supported everywhere.\n\nInterview Follow-ups: How do you trap focus in a modal? Use JavaScript to manage tabindex. What is the difference between prefers-contrast and forced-colors? prefers-contrast is user preference for higher contrast; forced-colors is OS high contrast mode.\n\nBest Practices: Always style :focus-visible. Test with keyboard only. Use semantic HTML. Provide skip links on every page.\n\nResponsive Considerations: Focus management unaffected.\n\nAccessibility: Core topic.\n\nPerformance Optimization: No impact.\n\nProduction Recommendations: Use Lighthouse and axe for testing. Include skip link. Use Tailwind's focus-visible variants.\n\nLatest Tailwind Patterns: focus-visible:ring, aria-[expanded]:rotate-180, forced-colors:outline (need plugin or arbitrary).\n\nInterview Tip: Demonstrate a modal that traps focus and returns to trigger on close.\n\nCommon Follow-up: How to make a custom dropdown accessible? Use role=\"combobox\", aria-expanded, aria-controls, and keyboard handlers.\n\nReal-world Example: A navigation menu: skip link at top. Dropdowns use aria-expanded to rotate icon via CSS. High contrast mode ensures borders are visible.",[289,436,437,438,439],"focus-management","aria","high-contrast","skip-link",{"id":74,"category":285,"question":441,"answer":442,"level":234,"tags":443},"Explain complex focus management in single-page applications (SPA): focus trapping, focus restoration, and roving tabindex.","Concept Explanation: SPAs require managing focus across dynamic content: focus trapping in modals (prevent focus leaving), focus restoration (return to trigger when modal closes), and roving tabindex (arrow key navigation in menus\u002Flistboxes). CSS supports some but JavaScript handles movement.\n\nInternal Behavior: Focus trapping: listen to keydown on modal, intercept Tab key, cycle focus within modal. Focus restoration: store document.activeElement before open, restore after close. Roving tabindex: set tabindex=\"0\" on active item, -1 on others, handle arrow keys to move.\n\nSyntax Explanation: CSS can style :focus but not manage order. JavaScript needed for complex traps. CSS :focus-within can style parent when focus inside.\n\nCSS Examples:\ncss\n\u002F* Style when focus inside modal *\u002F\n.modal:focus-within { outline: none; }\n\u002F* Roving tabindex active item *\u002F\n[aria-selected=\"true\"] { background: blue; }\n\n\nTailwind Examples: Use focus:ring for visible focus. focus-within:ring for container.\n\nPractical Examples: Modal dialog, dropdown menu, tablist, combobox, tree view.\n\nCommon Mistakes: Forgetting to restore focus causing user lost. Trap not working with Shift+Tab. Not handling Esc key to close.\n\nEdge Cases: Iframes can break focus trapping. Dynamically added content may need focus management. Screen reader virtual cursor bypasses JavaScript focus traps.\n\nInterview Follow-ups: What is roving tabindex? Only one element has tabindex=0, others -1, arrow keys move the 0. How do you handle focus when modal contains iframe? The iframe content has its own focus.\n\nBest Practices: Use inert polyfill for older browsers. Use preventDefault on Tab when needed. Use aria-hidden on background content.\n\nResponsive Considerations: No impact.\n\nAccessibility: Essential.\n\nPerformance Optimization: Minimal.\n\nProduction Recommendations: Use libraries like focus-trap, react-focus-lock. Test with screen readers.\n\nLatest Tailwind Patterns: No direct.\n\nInterview Tip: Write a simple focus trap function.\n\nCommon Follow-up: How does inert attribute help? Makes elements unfocusable and inaccessible.\n\nReal-world Example: A modal with form fields: on open, focus first input; on close, focus back to the button that opened it. Trap prevents Tab from going to background.",[289,444,445,446,447],"focus-trap","roving-tabindex","spa","keyboard",{"id":81,"category":140,"question":449,"answer":450,"level":234,"tags":451},"How do you create complex, performant CSS animations (keyframes, transforms, 3D, timeline, Web Animations API)?","Concept Explanation: Complex animations combine keyframes, 3D transforms, and the Web Animations API (WAAPI) for JavaScript control. CSS @keyframes define sequences; transform provides 3D (rotateX, translateZ); animation-timeline (experimental) scroll-driven animations; WAAPI offers dynamic playback.\n\nInternal Behavior: GPU accelerates transform and opacity. 3D transforms create compositor layers. animation-timeline: scroll() links animation to scroll progress. WAAPI creates Animation objects that can be paused, reversed, and have event callbacks.\n\nSyntax Explanation:\ncss\n@keyframes float {\n 0% { transform: translateY(0) rotate(0deg); }\n 100% { transform: translateY(-20px) rotate(3deg); }\n}\n.float { animation: float 2s ease-in-out infinite alternate; }\n\u002F* 3D card flip *\u002F\n.card {\n transform-style: preserve-3d;\n transition: transform 0.6s;\n}\n.card:hover { transform: rotateY(180deg); }\n\nWAAPI: element.animate(keyframes, { duration: 1000, iterations: Infinity });\n\nTailwind Examples: Custom keyframes in config. animate-spin, animate-pulse. For 3D, need custom utilities: transform-gpu, preserve-3d, backface-hidden.\n\nPractical Examples: 3D product carousel, scroll-triggered animations, parallax depth, particle animations via WAAPI.\n\nCommon Mistakes: Animating properties that cause reflow. Not setting transform-style: preserve-3d for nested 3D. Overusing 3D causing z-fighting.\n\nEdge Cases: backface-visibility: hidden fixes flipped element text. animation-timeline experimental; check support. WAAPI memory usage for many animations.\n\nInterview Follow-ups: How to chain animations? Use animation-delay or WAAPI finished promise. What is will-change for complex animations? Hint to browser. How to optimize 3D? Limit layers, use contain.\n\nBest Practices: Use transform and opacity. For scroll animations, use Intersection Observer or WAAPI with ScrollTimeline. Prefer WAAPI for complex sequencing.\n\nResponsive Considerations: Reduce 3D animations on mobile.\n\nAccessibility: Respect prefers-reduced-motion.\n\nPerformance Optimization: Use will-change: transform. Keep keyframe count low.\n\nProduction Recommendations: For scroll animations, use libraries like GSAP or ScrollTrigger. For 3D, consider Three.js for complex.\n\nLatest Tailwind Patterns: Custom animations via theme.extend.keyframes. Arbitrary animate-[float_2s_infinite].\n\nInterview Tip: Demonstrate a 3D card flip and explain how preserve-3d works.\n\nCommon Follow-up: What is the difference between CSS animations and WAAPI? WAAPI gives JS control (play, pause, reverse, seek).\n\nReal-world Example: An e-commerce product viewer: 3D rotate on hover, with smooth transitions, GPU accelerated.",[144,452,453,454,382],"3d","keyframes","web-animations-api",{"id":88,"category":456,"question":457,"answer":458,"level":234,"tags":459},"Tailwind Internals","How does Tailwind's Just-In-Time (JIT) engine work internally?","Concept Explanation: Tailwind JIT (default from v3) generates CSS on-demand as you author HTML, rather than pre-generating all utilities. It watches your files, parses class names, and builds the exact CSS needed in real-time, enabling arbitrary values and reducing build times.\n\nInternal Behavior: JIT uses a custom parser to scan content files for class names using regex. It builds a dependency graph, then generates CSS utilities lazily. When a class is detected, it generates the corresponding CSS and caches it. The engine runs in watch mode, rebuilding only changed classes. It supports arbitrary values by dynamically generating new utilities.\n\nSyntax Explanation: Without JIT: w-1\u002F2 was not a default utility; you needed config. With JIT: w-[50%] works. The engine parses brackets, extracts value, and generates width: 50%.\n\nCSS Examples: JIT generates .w-\\[50\\%\\] { width: 50%; } on demand.\n\nTailwind Examples: bg-[#123456], w-[calc(100%-2rem)] are possible only with JIT.\n\nPractical Examples: Rapid prototyping with arbitrary values. Custom spacing, colors, or complex calculations without touching config.\n\nCommon Mistakes: Assuming JIT works without content paths. Using dynamic class strings (e.g., text-${color}) which cannot be parsed. Forgetting that JIT still purges unused classes.\n\nEdge Cases: Very large number of arbitrary values can increase CSS size. The parser might miss classes if they are split across lines or concatenated in complex ways.\n\nInterview Follow-ups: How does JIT differ from AOT? AOT generates all utilities; JIT generates only used. Can JIT be used in production? Yes, but with purging. What is the performance overhead? Minimal because of caching.\n\nBest Practices: Keep class names whole. Use safelist for dynamic patterns. Trust JIT for development; production build still purges.\n\nResponsive Considerations: JIT generates responsive variants on demand.\n\nAccessibility: No impact.\n\nPerformance Optimization: JIT significantly reduces build time. For production, still run purging.\n\nProduction Recommendations: Enable JIT in development; in production, it's default in v3, but ensure content paths are correct.\n\nLatest Tailwind Patterns: Arbitrary variants [&_p]:mt-2. JIT enables this.\n\nInterview Tip: Explain that JIT changed Tailwind from a configuration-heavy framework to a more flexible one.\n\nCommon Follow-up: How does Tailwind parse arbitrary values with spaces? Use underscores: grid-cols-[200px_1fr].\n\nReal-world Example: A component library where users need one-off styles: w-[calc(100%-20px)] without modifying config.",[14,327,460,382],"internals",{"id":95,"category":456,"question":462,"answer":463,"level":234,"tags":464},"How does Tailwind's build optimization work (caching, content scanning, incremental builds)?","Concept Explanation: Tailwind's build process uses several optimizations: content scanning with regex, caching of parsed files, incremental rebuilds (only re-scan changed files), and intelligent generation of CSS (only utilities that appear). The CSS output is deduplicated and minified.\n\nInternal Behavior: Tailwind CLI or PostCSS plugin reads content globs, scans files line by line with regex for class names (not AST parsing). It maintains a cache of which classes exist per file. On subsequent builds, only files that changed are re-scanned. The CSS generation step creates a map of used utilities and outputs only those.\n\nSyntax Explanation: Configuration uses content array. Use --watch for incremental builds. TAILWIND_MODE=watch environment variable.\n\nCSS Examples: N\u002FA.\n\nTailwind Examples: npx tailwindcss -i input.css -o output.css --watch.\n\nPractical Examples: Large monorepo with many components; incremental builds save seconds. CI\u002FCD pipelines optimizing build time.\n\nCommon Mistakes: Using content patterns that are too broad (scanning node_modules). Not leveraging caching in CI (cache .tailwindcache). Forgetting that JIT already optimizes.\n\nEdge Cases: Very large files (megabytes) may slow scanning; use ignore patterns. Some build tools (Webpack) integrate Tailwind differently.\n\nInterview Follow-ups: How does Tailwind's class detection work? Regex matching, not AST. What is the .tailwindcache file? Stores parsed content to avoid re-scanning. How to speed up builds in CI? Cache node_modules and .tailwindcache.\n\nBest Practices: Keep content globs specific. Use --watch in development. Exclude node_modules unless necessary.\n\nResponsive Considerations: No impact.\n\nAccessibility: No impact.\n\nPerformance Optimization: Use content with ! exclude patterns. Split CSS into multiple entry points if needed.\n\nProduction Recommendations: Use NODE_ENV=production for minification. Use cssnano for extra compression.\n\nLatest Tailwind Patterns: @config directive to specify config in CSS. Use --watch with postcss.\n\nInterview Tip: Explain how to measure build time and optimize.\n\nCommon Follow-up: How does Tailwind compare to other frameworks in build speed? With JIT, very fast; without, slower due to full generation.\n\nReal-world Example: A monorepo with 10 Next.js apps sharing a Tailwind config; caching reduces build time from 20s to 2s per app after first build.",[14,465,466,382],"build-optimization","caching",{"id":102,"category":468,"question":469,"answer":470,"level":234,"tags":471},"Atomic CSS","Explain the atomic CSS architecture and how Tailwind implements it. What are the tradeoffs?","Concept Explanation: Atomic CSS is a methodology where each class does one thing (e.g., margin-0, padding-4). Tailwind is an atomic CSS framework. This contrasts with semantic CSS (one class describes component). Benefits: no conflicts, predictable, small CSS after purging.\n\nInternal Behavior: Each utility maps to one CSS declaration. Browser matches single-class selectors quickly. Combining many classes on an element creates the visual design. PurgeCSS removes unused utilities.\n\nSyntax Explanation: Atomic: \u003Cdiv class=\"p-4 bg-white shadow\">. Semantic: \u003Cdiv class=\"card\">.\n\nCSS Examples: .p-4 { padding: 1rem; } .bg-white { background: white; }.\n\nTailwind Examples: Traditional.\n\nPractical Examples: Building UI by composing utilities.\n\nCommon Mistakes: Believing atomic CSS produces larger HTML (true) but smaller CSS. Overlooking that browser parses class names, not a big cost.\n\nEdge Cases: Very complex components may have 20+ classes, but gzip compresses well. Maintenance can be harder if not using component abstraction.\n\nInterview Follow-ups: What are the benefits of atomic CSS vs semantic? Predictability, no specificity wars, smaller CSS. Drawbacks? Verbose HTML, learning curve, abstraction required.\n\nBest Practices: Use component framework to encapsulate class groups. Keep design tokens consistent. Avoid inline styles.\n\nResponsive Considerations: Atomic works well with responsive variants.\n\nAccessibility: No direct.\n\nPerformance Optimization: Atomic CSS purges to very small sizes; browser parses single classes fast.\n\nProduction Recommendations: Adopt Tailwind. Use @apply sparingly. Embrace component composition.\n\nLatest Tailwind Patterns: Using clsx and cva for component abstraction while keeping atomic output.\n\nInterview Tip: Compare Tailwind to Tachyons or other atomic frameworks.\n\nCommon Follow-up: Does atomic CSS violate separation of concerns? Modern thinking couples markup and style; separation is about maintainability, not file separation.\n\nReal-world Example: Google's web framework uses atomic CSS; many large companies use Tailwind for its scalability.",[472,14,244,151],"atomic-css",{"id":109,"category":474,"question":475,"answer":476,"level":234,"tags":477},"CSS-in-JS","Compare runtime CSS-in-JS (styled-components, Emotion) vs build-time (Linaria, Compiled) vs Tailwind for performance and developer experience.","Concept Explanation: Runtime CSS-in-JS generates and injects styles at runtime using JavaScript. Build-time extracts CSS during compilation. Tailwind is pure CSS with utilities. Each has tradeoffs in bundle size, runtime cost, and DX.\n\nInternal Behavior: Runtime: styles parsed, hashed, injected into \u003Cstyle> on component mount; updates cause re-injection. Build-time: styles extracted to static CSS files, no runtime overhead. Tailwind: static CSS with purging.\n\nSyntax Explanation: Styled-components: const Button = styled.button; background: blue;. Linaria: const Button = styled.button; but compiles to CSS. Tailwind: className=\"bg-blue-500\".\n\nCSS Examples: Not applicable.\n\nTailwind Examples: Traditional.\n\nPractical Examples: Highly dynamic theming (user selects colors) may favor CSS-in-JS. Performance-critical apps favor Tailwind or build-time.\n\nCommon Mistakes: Runtime CSS-in-JS causing FOUC on SSR; need critical CSS extraction. Tailwind dynamic classes not purged.\n\nEdge Cases: Runtime library with many dynamic styles can cause significant CPU usage. Build-time may not support all dynamic features.\n\nInterview Follow-ups: Which has best performance? Tailwind or build-time CSS-in-JS. Which offers best DX? Tailwind for speed, styled-components for colocation. How to choose? Evaluate team, performance needs, dynamic requirements.\n\nBest Practices: Use Tailwind for static designs, runtime CSS-in-JS for complex theming, build-time for performance with component-scoped styles.\n\nResponsive Considerations: All support.\n\nAccessibility: No impact.\n\nPerformance Optimization: Measure bundle size with @next\u002Fbundle-analyzer. For CSS-in-JS, use zero-runtime variants.\n\nProduction Recommendations: Prefer Tailwind or build-time CSS-in-JS for production apps. Avoid runtime in performance-critical paths.\n\nLatest Tailwind Patterns: Tailwind + CSS variables for dynamic theming bridges gap.\n\nInterview Tip: Show runtime CSS-in-JS bundle impact vs Tailwind's \u003C15KB.\n\nCommon Follow-up: Can you use Tailwind inside styled-components? Yes, via css helper.\n\nReal-world Example: A design system used across 50 micro-frontends: choose Tailwind for consistent small CSS. A white-label product with runtime theme switching: choose CSS-in-JS or CSS variables with Tailwind.",[431,382,14,478,479,480],"styled-components","emotion","linaria",{"id":116,"category":482,"question":483,"answer":484,"level":234,"tags":485},"Comparison","Tailwind vs styled-components: detailed comparison for large-scale React applications.","Concept Explanation: Tailwind (utility-first) and styled-components (CSS-in-JS) have different philosophies. Tailwind styles in markup, styled-components in JavaScript. Large-scale considerations: performance, maintainability, theming, and team adoption.\n\nInternal Behavior: Tailwind generates static CSS; browser caches. Styled-components generates dynamic \u003Cstyle> tags; runtime cost. Tailwind requires purging; styled-components has no purging but generates only used styles (runtime).\n\nSyntax Explanation: Tailwind: \u003Cdiv className=\"p-4 bg-blue\">. Styled: \u003CDiv $primary>. Styled encapsulates styles per component; Tailwind uses global classes (but scoped via content).\n\nCSS Examples: N\u002FA.\n\nTailwind Examples: Traditional.\n\nPractical Examples: Large team of 20+ developers: Tailwind's single source of truth (design tokens) vs styled-components' per-component styles.\n\nCommon Mistakes: Tailwind: long class strings, learning curve. Styled-components: runtime performance, SSR complexity.\n\nEdge Cases: Styled-components with dynamic props can cause many class variations. Tailwind with dynamic classes requires safelist.\n\nInterview Follow-ups: Which has better performance? Tailwind (static CSS). Which has better dynamic theming? Styled-components (props). Which is easier to onboard? Tailwind (if developers know CSS).\n\nBest Practices: Use Tailwind with component composition. Use styled-components for highly dynamic component libraries. Or mix: Tailwind utilities + CSS-in-JS for dynamic parts.\n\nResponsive Considerations: Both support.\n\nAccessibility: Both fine.\n\nPerformance Optimization: Tailwind wins on runtime. Styled-components can use babel-plugin to improve.\n\nProduction Recommendations: For static designs, Tailwind. For white-label apps with extensive theming, styled-components or CSS variables.\n\nLatest Tailwind Patterns: Tailwind + CVA + twMerge replaces many styled-components use cases.\n\nInterview Tip: Mention that Twitter migrated from CSS-in-JS to Tailwind for performance.\n\nCommon Follow-up: Can you use both? Yes, Tailwind for layout utilities, styled-components for component-specific styles.\n\nReal-world Example: A large e-commerce site: Tailwind for marketing pages (performance), styled-components for checkout wizard (complex state-based styling).",[14,478,158,263],{"id":124,"category":482,"question":487,"answer":488,"level":234,"tags":489},"Tailwind vs CSS Modules: when to choose which for component-based frameworks?","Concept Explanation: CSS Modules provide locally scoped CSS, preventing conflicts. Tailwind provides global utility classes. Both work with component frameworks. CSS Modules require writing CSS (or SCSS); Tailwind uses utility classes in markup.\n\nInternal Behavior: CSS Modules transform class names to unique hashed names. Tailwind uses standard class names that are globally scoped but generated from a restricted set. CSS Modules require a build step; Tailwind also requires build (for purging).\n\nSyntax Explanation: CSS Modules: import styles from '.\u002FButton.module.css'; \u003Cbutton className={styles.button}>. Tailwind: \u003Cbutton className=\"bg-blue-500\">.\n\nCSS Examples:\ncss\n\u002F* CSS Modules *\u002F\n.button { background: blue; }\n.primary { background: darkblue; }\n\n\nTailwind Examples: Traditional.\n\nPractical Examples: A component library that must be consumed by many projects: CSS Modules avoids class name collisions. Tailwind requires consumers to have Tailwind installed.\n\nCommon Mistakes: CSS Modules: global styles leakage if not careful. Tailwind: class name collisions if external CSS uses same names.\n\nEdge Cases: CSS Modules composition with composes is limited. Tailwind's arbitrary values increase CSS size.\n\nInterview Follow-ups: Which provides better isolation? CSS Modules. Which provides faster development? Tailwind (once familiar). How to combine? Use Tailwind inside CSS Modules via @apply.\n\nBest Practices: For public component libraries, use CSS Modules (or CSS-in-JS). For app-specific styling, Tailwind is faster.\n\nResponsive Considerations: Both support responsive.\n\nAccessibility: No impact.\n\nPerformance Optimization: Both produce static CSS. CSS Modules need purging manually; Tailwind has built-in.\n\nProduction Recommendations: Use Tailwind for app development. Use CSS Modules if you must distribute CSS without requiring Tailwind.\n\nLatest Tailwind Patterns: Tailwind can be used with CSS Modules: import Tailwind directives into CSS Module.\n\nInterview Tip: Show how to scope Tailwind by using unique prefix or important selector.\n\nCommon Follow-up: How do you handle dark mode with CSS Modules? Use CSS variables or multiple modules.\n\nReal-world Example: A design system as an npm package: use CSS Modules to avoid forcing consumers to use Tailwind. The consuming app may use Tailwind, but the package styles are isolated.",[14,261,158,262],{"id":132,"category":491,"question":492,"answer":493,"level":234,"tags":494},"Production Optimization","How do you implement critical CSS for above-the-fold content with Tailwind?","Concept Explanation: Critical CSS is the minimal CSS required to render above-the-fold content, inlined in \u003Chead> to eliminate render-blocking requests. With Tailwind, you need to extract only the classes used above the fold, typically using tools like critters, critical, or @tailwindcss\u002Fcritic.\n\nInternal Behavior: The tool parses HTML, identifies above-the-fold elements (or whole page), extracts all CSS rules that apply, and inlines them. Remaining CSS is loaded async. Tailwind's small CSS makes critical extraction easier but still beneficial.\n\nSyntax Explanation: Using critters Webpack plugin: new Critters({ inlineThreshold: 0 }). Or critical CLI: critical index.html --base dist\u002F --inline > index.critical.html. For Tailwind, ensure output CSS is included.\n\nCSS Examples: Inline styles in \u003Cstyle>.\n\nTailwind Examples: N\u002FA.\n\nPractical Examples: A landing page with hero section; inline CSS for hero, lazy load rest.\n\nCommon Mistakes: Inlining too much CSS (all), defeating purpose. Not handling dynamic classes. Critical CSS not updated when content changes.\n\nEdge Cases: Single-page applications: critical CSS for initial route only. Media queries in critical CSS must remain.\n\nInterview Follow-ups: What is the performance benefit? Eliminates round trips; improves First Contentful Paint. How to automate? In build pipeline. What's the tradeoff? Increases HTML size slightly.\n\nBest Practices: Use tools integrated with your framework (Next.js has built-in critical CSS). Only inline above-the-fold. Use preload for remaining CSS.\n\nResponsive Considerations: Critical CSS should include responsive styles for above-the-fold at all breakpoints? Inline only for initial viewport or all? Common to inline all critical styles across breakpoints.\n\nAccessibility: No impact.\n\nPerformance Optimization: Reduces render-blocking resources.\n\nProduction Recommendations: Use Next.js next\u002Fhead with dangerouslySetInnerHTML. Use @tailwindcss\u002Fcritic or similar. Test with Lighthouse.\n\nLatest Tailwind Patterns: Tailwind's small size (often \u003C20KB) may not need critical CSS; but still beneficial. Use postcss-import to split.\n\nInterview Tip: Demonstrate Lighthouse score improvement after critical CSS inlining.\n\nCommon Follow-up: How do you extract critical CSS for dynamic routes? Use puppeteer to render and capture.\n\nReal-world Example: A marketing site with huge hero image and custom fonts; critical CSS for hero, typography, above-fold buttons inlined; remaining styles loaded async, improving LCP from 2.5s to 1.2s.",[495,382,14,496],"critical-css","optimization",{"id":139,"category":498,"question":499,"answer":500,"level":234,"tags":501},"Rendering Performance","What techniques improve rendering performance in large-scale CSS (content-visibility, contain, paint skipping, will-change)?","Concept Explanation: Modern CSS properties optimize rendering: content-visibility: auto skips rendering off-screen elements; contain isolates subtrees; will-change hints about future changes; paint skipping avoids painting off-screen content. These drastically reduce layout and paint costs.\n\nInternal Behavior: content-visibility: auto gives the element its own layout containment, style containment, and paint containment, and skips painting when off-screen. contain: layout limits layout recalculation to subtree. will-change creates a compositor layer before animation. Paint skipping means off-screen content not painted.\n\nSyntax Explanation: content-visibility: auto; contain-intrinsic-size: 500px; (reserves space). contain: layout paint;. will-change: transform;. Tailwind: content-visibility-auto, contain-layout, will-change-transform (need plugin or arbitrary).\n\nCSS Examples:\ncss\n.lazy-section {\n content-visibility: auto;\n contain-intrinsic-size: 500px; \u002F* estimated height *\u002F\n}\n.animated {\n will-change: transform;\n}\n\n\nTailwind Examples: Arbitrary: content-visibility-[auto], contain-[layout_paint], will-change-[transform].\n\nPractical Examples: Long lists (chat messages, infinite scroll), off-screen modals, virtual scrolling wrappers.\n\nCommon Mistakes: Setting content-visibility: auto on small elements (overhead). Not providing contain-intrinsic-size causing layout shifts. Overusing will-change causing memory bloat.\n\nEdge Cases: content-visibility may cause scrollbar jumps if size not estimated. Some browsers have incomplete support for contain.\n\nInterview Follow-ups: What is the difference between content-visibility: auto and display: none? auto preserves layout size, none removes. How does contain: strict differ? Includes all containment types. When to use will-change? Before animation, not during.\n\nBest Practices: Apply content-visibility: auto to off-screen sections (e.g., below the fold). Use contain-intrinsic-size to prevent layout shift. Limit will-change to animating elements.\n\nResponsive Considerations: Not specific.\n\nAccessibility: Ensure off-screen content still accessible for screen readers (it is).\n\nPerformance Optimization: These are the optimizations.\n\nProduction Recommendations: Add content-visibility: auto to long pages. Use contain on widgets. Profile with Performance panel.\n\nLatest Tailwind Patterns: Need custom utilities or arbitrary values. Some community plugins provide content-visibility utilities.\n\nInterview Tip: Demonstrate performance gains with a long list before\u002Fafter content-visibility.\n\nCommon Follow-up: How do you measure paint skipping? Chrome DevTools > Rendering > Paint flashing.\n\nReal-world Example: A social media feed with 200 posts. Adding content-visibility: auto to each post reduces initial paint time from 800ms to 120ms.",[502,503,403,382,380],"content-visibility","contain",{"id":146,"category":505,"question":506,"answer":507,"level":234,"tags":508},"Enterprise","How do you architect CSS for a large enterprise with multiple teams, micro-frontends, and shared component libraries?","Concept Explanation: Enterprise CSS architecture must handle isolation, consistency, performance, and theming across teams and apps. Approaches: CSS Modules (scoped), CSS-in-JS (runtime isolation), Tailwind with prefixes, or BEM + global styles. Micro-frontends require style isolation (Shadow DOM, CSS Modules) and shared tokens.\n\nInternal Behavior: Each micro-frontend can have its own CSS (via CSS Modules) to avoid conflicts. Shared component library uses design tokens (CSS variables) and may output scoped styles. The container app loads tokens globally.\n\nSyntax Explanation: Use CSS variables for tokens. Micro-frontend A: CSS Modules. Micro-frontend B: Tailwind with unique prefix. Component library: both static CSS and scoped variants.\n\nCSS Examples:\ncss\n\u002F* Shared tokens *\u002F\n:root { --primary: #3b82f6; }\n\u002F* Micro-frontend scoped class *\u002F\n[data-mfe=\"dashboard\"] .button { ... }\n\n\nTailwind Examples: Use prefix option in config: prefix: 'tw-' to avoid collisions. Combine with PostCSS for scoping.\n\nPractical Examples: Large e-commerce site with checkout, product, search teams each owning a micro-frontend.\n\nCommon Mistakes: Not isolating styles causing cross-MFE conflicts. Overly generic class names. Inconsistent token usage.\n\nEdge Cases: Shadow DOM can encapsulate styles but breaks portals. CSS-in-JS across MFEs increases bundle size. Shared components need to work in multiple styling contexts.\n\nInterview Follow-ups: How do you share design tokens across MFEs? Use npm package of CSS variables. How to handle theming? Use global CSS variables updated by container. How to optimize CSS delivery? Critical CSS per MFE, lazy load.\n\nBest Practices: Use design tokens as CSS variables. Each MFE should scope its CSS (CSS Modules or prefix). Shared component library should accept className prop for overrides. Use @layer for controlling cascade.\n\nResponsive Considerations: Global breakpoints via CSS variables.\n\nAccessibility: Global focus styles must be consistent.\n\nPerformance Optimization: Avoid duplicating utility CSS across MFEs; use a shared Tailwind preset.\n\nProduction Recommendations: Use Module Federation with Webpack. Each MFE builds its own CSS; container aggregates. Use mini-css-extract-plugin to dedupe.\n\nLatest Tailwind Patterns: Tailwind with prefix and important to avoid collisions. Use presets to share config across MFEs.\n\nInterview Tip: Describe a micro-frontend architecture with Webpack 5 Module Federation and Tailwind prefix.\n\nCommon Follow-up: How do you handle CSS in micro-frontends with different frameworks? Use CSS Modules or Shadow DOM; avoid framework-specific CSS-in-JS.\n\nReal-world Example: A large bank with 20 teams: each team owns a micro-frontend (accounts, loans, cards). Shared component library (buttons, modals) uses CSS variables for theming, and each MFE uses CSS Modules with a unique namespace prefix (e.g., accounts-). No style conflicts.",[509,510,164,511,14],"enterprise","micro-frontends","scaling",1779734544541]