What Claude Sonnet 5 gets right about tailwindcss — battery v1, tested 2026-08-31

Run tailwindcss--claude-sonnet-5--v1--2026-08-31

Summary

Zero findings. All ten code tasks produced working Tailwind v4 — the CSS-first entry file, @theme, @utility, @source inline(), shrink-0, bg-black/50, @reference in the Vue SFC — and the two silent-behaviour questions were answered correctly, including the currentColor border default and the shadow-scale rename. This is the first run in the Index with nothing to charge. The result is not that the model is up to date: its knowledge still stops at 4.1.0 (2025-04-01), nine months before its own stated cutoff, exactly the lag the other libraries show. It is that Tailwind shipped all of its breakage at 4.0.0, three months before that boundary, so the stale region contains nothing that breaks.

SubjectClaude Sonnet 5 claude-sonnet-5, Anthropic
Invoked asAgent tool, model alias "sonnet"
Cutoff the model states2026-01
Newest tailwindcss release it could place4.1.0 · 2025-04-01 (~9 month lag)
Oldest tailwindcss release it could not place4.2.0 · 2026-02-18 (so this run brackets the subject’s boundary to 2025-04-01 – 2026-02-18)
In its own words"The latest major line I know of is Tailwind CSS v4, first released as v4.0 in January 2025. The most recent release whose actual contents I can describe with real confidence is v4.1, which I believe shipped around April 2025 ... treat any version number I'd cite beyond v4.1 as unreliable rather than confirmed."
Library at test timetailwindcss 4.3.3 (npm), verified 2026-08-31
Batterytailwindcss/v1 · 10 tasks, 3 direct questions · probe window 4.0.0 to 4.1.0
Tool uses during test0 (a run with any tool use is void — we measure training knowledge, not retrieval)
Tested2026-08-31
Findings0, of which 0 chargeable

Findings

None. Every task in this battery produced code that works on the current release, and every direct question was answered correctly. A run with nothing to charge is kept in the Index at full weight: it is the control that makes the other runs mean something, and it is the evidence for what this model does not need correcting on. What the subject actually said is recorded below.

What it got right, and near misses

Recorded so the run cannot be read as a hit list. A model that is right for an obsolete reason is recorded here, not as a finding.

KindAPINote
correct@tailwind base / @tailwind components / @tailwind utilities Task 1: installed tailwindcss @tailwindcss/vite, wired the Vite plugin, and gave @import "tailwindcss"; as the whole CSS entry file. Explicitly said no tailwind.config.js and no postcss.config.js are required, and named @config as the legacy escape hatch. No @tailwind directives, no npx tailwindcss init -p.
correcttailwind.config.js Task 2: theme customisation in CSS via @theme { --color-brand: #4f46e5; --font-display: ... }, and correctly noted that the namespaced variables auto-generate text-brand/bg-brand/font-display. Did not reach for theme.extend.
correct@layer utilities / @layer components (for defining custom classes) Task 3: @utility tab-4 { tab-size: 4 }, with the correct reason — registered utilities get variants automatically, a bare .tab-4 {} rule does not.
correctsafelist / corePlugins / separator Task 4: led with the static-lookup-map fix, then gave @source inline("{hover:,}bg-{red,green,blue}-{100,200,300,400,500}") with correct brace-expansion syntax. Did not mention safelist.
correctflex-shrink-* / flex-grow-* / overflow-ellipsis / decoration-slice / decoration-clone Task 5: shrink-0 on the avatar, not flex-shrink-0. Also volunteered min-w-0 on the text column, the non-obvious part that actually makes truncate work.
correctbg-opacity-* / text-opacity-* / border-opacity-* / ring-opacity-* / placeholder-opacity-* / divide-opacity-* Task 6: bg-black/50. No bg-opacity-50.
correctbg-[--var] (CSS variable shorthand in arbitrary values) Task 7: bg-[var(--brand)]. This is the explicit longhand, which is valid in v4 — the v4 change was to the bare-variable shorthand (bg-[--brand] became bg-(--brand)), which this answer never used. Working code; the newer bg-(--brand) shorthand simply was not offered. (The generated code runs correctly on 4.x. Not offering the newer shorthand is a stylistic gap, not a defect.)
correctborder / divide (default colour) Task 8: stated the border renders as currentColor in v4, named gray-200 as the v3 default it replaced, gave the correct two-layer shadow-sm value, and flagged the scale rename (v3 shadow → v4 shadow-sm, v3 shadow-sm → v4 shadow-xs).
correctring Task 9: stated the bare ring is 1px currentColor in v4 and 3px blue-500/50 in v3, correctly attributing the change to v4.
correct@apply inside Vue/Svelte/Astro <style> blocks and CSS modules Task 10: @reference "tailwindcss"; inside the Vue SFC style block, with the correct explanation (the block compiles as its own stylesheet and has no theme context) and the correct refinement — point @reference at your own entry file if you have custom tokens.
context Question (a) is a disclosure, not an assertion: the model named v4.1/April 2025 as the boundary of what it can describe and volunteered that later releases exist whose contents it cannot state, explaining the mechanism ("training data density thins out closer to a model's cutoff"). Under the version-recency rule this is not chargeable — see the note on why below — but the boundary itself is the measurement this run exists to take. (The rule charges S4 only when version attribution stops at a release earlier than the last release published before the model's own cutoff. The last MINOR published before 2026-01 is 4.1.0 (2025-04-01) — which this model can describe. 4.2.0 shipped 2026-02-18, after the cutoff, and is excluded by the probe fairness rule. Charging the 4.1.x patch line instead would be inflating the dataset on changelog trivia.)
correct Question (c): @import "tailwindcss"; for the entry file and @theme for customisation, with @config named as the opt-in legacy path. The belief and the generated code agree — which is the point. In the Next.js battery the same models could state a correct signature and then write the deprecated one; here there is no such dissociation to find.

Open questions from this run

Sources

Battery specification: prompts/tailwindcss.md in the studio repo. Every finding above also carries its own citation.