fix: classes that compiled to nothing, SSR column mismatches, and a CI guard

[tsahimatsliah]

Why

The phone shell (#6767) broke desktop feed settings by splitting w-74 into tablet:w-74 w-full. w-74 had never existed in our Tailwind config, so a no-op became a desktop regression (#6840 fixed it). A sweep of the files the shell PRs touched found more classes that compile to nothing and two SSR mismatches. This PR fixes what the sweep found.

Changes

Alpha modifiers work on tokens

• bg-accent-avocado-default/40 and friends compiled to nothing because the token colours were bare var(--theme-…) strings. withAlpha wraps the accent, text, status, surface, background and overlay tokens with Tailwind's <alpha-value> placeholder, so /NN works for an alpha on the opacity scale (16, 24, 32, 40, 50, 64) and /[0.35] for any other value. Every off-scale modifier in the repo is written in the bracket form now. The plain utilities compile to the same colour as before.
• The custom caret plugin is removed: it wrote theme colours straight into caret-color and would have passed the placeholder through. Core Tailwind generates the same caret-* classes from theme.colors.

Dead classes

• Spotlight: animate-spotlight-scrim-in, animate-spotlight-panel-in and animate-spotlight-list-fade were never defined (since feat: spotlight feature #6011). All three fade opacity only, so the both fill leaves no transform on the scrolling list or the panel.
• The hot takes onboarding card's aura blobs and sparks, and the composer's spam warning, used alpha modifiers and never rendered; they do now (before/after: https://claude.ai/artifact/APm4A62j3TxZSK6rEz2cjz).
• opacity-70 → opacity-64 (the scale has no 70), z-20 → z-[20] (keeps its place under the z-[21] overlay), line-clamp-10 added to the config.
• Classes that never applied and only changed looks are deleted, since the shipped design is the one without them: shadow-1, scale-60, scale-80, two z-10s, the post analytics button's hover:bg-action-blueCheese-hober, the feedback caption's opacity-80, the squad brand button's hover:opacity-90.

Hydration

• MainFeedLayout's --num-cards and the tag page's follow grid rendered the client's column count on the hydration pass while the server rendered one column (dev warned on /search at tablet width and on every tag page). In production React keeps a mismatched attribute, so the layout stayed one column until something re-rendered the component. FeedLayoutProvider now serves the default column count on the hydration render and the real one after mount, through useIsHydrated, which reads React's own hydration state via useSyncExternalStore (so a boundary hydrated after the first effects still gets the server value, and later mounts never flash). MainLayoutHeader drops its local hasHydrated state for it. numCards is not in any query key, so nothing refetches.

Verified

• Every class in every touched file compiles through packages/webapp/tailwind.config.ts (checked with a one-off script, not part of this PR).
• Lint clean in shared, webapp and extension. Webapp typecheck clean; shared and extension each have one pre-existing spec typing error this branch does not touch.
• 518 shared suites (3,827 tests) and 110 webapp suites (850 tests) pass.
• Hot takes onboarding card before/after at desktop light, desktop dark and phone dark, from the same Storybook story on main and the branch.

Events

No new event names.

Experiment

None.

🤖 Generated with Claude Code

Preview domain

https://dead-classes-hydration-dailydotd.preview.app.daily.dev

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
daily-webapp	Ready	Preview	Oct 12, 2026 12:50pm UTC

[tsahimatsliah]

Reviewed the diff, compiled the Tailwind config on main and on this branch, and read the failing CI logs.

Blocking

1. CI is red. lint_shared and the lint step in test_webapp fail with tailwindcss/classnames-order in files this PR doesn't touch: PostFocusCard.tsx:794, SidebarDesktopV2.tsx:2544, Spotlight.tsx:1016 and :1103, and DevCardStep2.tsx:249. The cause is that registering shadow-1, scale-60/80 and animate-spotlight-* as real utilities changes where the sorter puts them. Running eslint --fix on those five files should fix it.
2. caret-text-link breaks on every text field (inline comment on withAlpha.ts).

Non-blocking

• The SSR column fix covers two consumers, but FeedContainer writes the same --num-cards without the gate (inline).
• 6 existing /10, /20 and /30 usages still compile to nothing, and the diff-only guard won't flag them (inline).
• eslint-plugin-tailwindcss is already installed, and its no-custom-classname rule covers what the new script does (inline).
• Classes that never applied before now render, so several surfaces change visually. Before/after screenshots are needed (inline).
• Scope: this PR combines a change to every text-*, accent-* and status-* utility (each now compiles to color-mix), a new hydration hook, a new CI tool and several visual changes. Splitting the colour-token change and the CI guard into their own PRs would make each one cheaper to review and to revert.

Reviewed by AI.

[tsahimatsliah]

Review follow-up (c094692)

Blocking

1. CI: the five files the new utilities re-sorted are fixed (eslint --fix); lint_shared, the webapp lint step and the extension lint are clean locally.
2. caret-text-link: the custom caret plugin is removed; core Tailwind generates the same caret-* classes and resolves <alpha-value>. No other plugin reads the colour objects, and theme() in CSS substitutes 1.

Non-blocking

• FeedContainer and the other numCards readers: the hydration gate moved into FeedLayoutProvider, so every consumer gets the server value on the hydration render and the real one after mount. The per-site gates are gone.
• The 6 remaining alpha modifiers: withAlpha now covers accent, text, status, surface, background and overlay, and every off-scale alpha in the repo is written as /[0.1]-style (23 usages, 12 rewritten). All compile.
• no-custom-classname: measured at 211 hits today, about 50 of them dead utilities and the rest hook classes and classes from embedded CSS that need a ~70-entry whitelist; with --max-warnings 0 even warn fails CI. I will open that as its own PR after this one, and it can retire the script then. Details in the thread.
• Screenshots: shadow-1, scale-60/80 and the z-1s are deleted instead of made real. The one surface that now shows something new is the hot takes onboarding card (aura and sparks); before/after at three viewports: https://claude.ai/artifact/APm4A62j3TxZSK6rEz2cjz
• Scope: the colour-token change stays here because the hot takes classes depend on it, and the guard is now one script plus one job. The dead-utility cleanup and the lint-rule switch are the follow-up PR.

Verified locally on c094692: lint clean in shared, webapp and extension; webapp typecheck clean (shared and extension each have one pre-existing spec typing error this branch does not touch); 518 shared suites (3,827 tests) and 110 webapp suites (850 tests) pass.

[tsahimatsliah]

CI is green on 0b0c4c7. The one failure after the last round was typecheck_strict_changed on pages/recruiter/[opportunityId]/plans.tsx, which this branch touched only to write bg-status-warning/[0.1]; its three strict errors are on unrelated, pre-existing lines, so the file is on the strict skip list with the usual note, as the script does for other touched-only files.