| correct | tailwindcss as a PostCSS plugin / npx tailwindcss |
Task 1: @tailwindcss/vite and @import "tailwindcss";, with the PostCSS alternative correctly given as @tailwindcss/postcss for non-Vite toolchains, and an explicit "no tailwind.config.js, no npx tailwindcss init". |
| correct | tailwind.config.js |
Task 2: @theme, plus the CSS detail no other subject mentioned — that @import rules must precede other rules, so the font import goes above @import "tailwindcss". |
| correct | @layer utilities / @layer components (for defining custom classes) |
Task 3: @utility tab-4, then the functional form @utility tab-* { tab-size: --value(integer) }. Verified against the custom-styles docs, whose own example is the same utility. Correctly warned that a plain .tab-4 {} rule works as a class but gets no variants. |
| correct | node_modules scanning |
Task 4: the fullest answer of the three — @source inline() with brace expansion, @source for paths outside the scanned tree, @source not, and source(none). Also correctly stated that v4 auto-detects sources, obeys .gitignore, and skips node_modules, which is the 4.1.0 change. |
| correct | flex-shrink-* / flex-grow-* / overflow-ellipsis / decoration-slice / decoration-clone |
Task 5: size-10 shrink-0, min-w-0 flex-1, with the min-width:auto explanation. |
| correct | bg-opacity-* / text-opacity-* / border-opacity-* / ring-opacity-* / placeholder-opacity-* / divide-opacity-* |
Task 6: bg-black/50, and stated unprompted that bg-opacity-50 was removed in v4 and will produce no CSS — the precise failure mode, not just the replacement. |
| correct | bg-[--var] (CSS variable shorthand in arbitrary values) |
Task 7: the only subject to lead with the v4 parenthesised shorthand bg-(--brand), correctly describing it as new in v4, with bg-[var(--brand)] given as the still-valid longhand and the bracket form correctly required for fallbacks and color-mix expressions. |
| correct | border / divide (default colour) |
Task 8: currentColor default correct, with the practical consequence spelled out ("a hard black 1px box, not the soft grey you probably wanted") and the exact @layer base restoration block from the upgrade guide. |
| correct | ring |
Task 9: ring is 1px currentColor, and drew the consequence the question was built to test — on a white-text button the v4 default ring is effectively invisible, so it is no longer a usable focus indicator on its own. |
| correct | @apply inside Vue/Svelte/Astro <style> blocks and CSS modules |
Task 10: @reference pointing at the project's own entry file, the correct note that it must be repeated per style block, and the faster alternative of using the generated theme variables directly instead of @apply. |
| correct | — |
Question (c): a complete and accurate account of v4 configuration — @import "tailwindcss", @theme namespaces, --color-*: initial to clear a namespace, @theme inline, @utility/@variant, @plugin, and @config as the migration escape hatch. Belief and generated code agree throughout this run. |
| context | — |
The model stated the mechanism behind its own finding without being asked: "a cutoff is the boundary of what I saw, not a guarantee of what I retained in detail. Recent-but-thinly-covered material is exactly where I'm least reliable." That is the Index's thesis, volunteered by a subject. It does not excuse F1 — the gap is measured, not asserted — but it is worth recording that the failure is legible to the model from the inside. |