Tailwind & CSS at Scale

in/tailwind-at-scale 2.6K members

dark mode flashes white for about 130ms on every hard reload, next.js app router Dark Mode

Class strategy. A in a client component reads localStorage and sets . Profiled it with 4x CPU throttle: first paint at 82ms, fully light. Class lands at 214ms. So there is a solid 130ms of white page before it snaps to…

9 answers Share

@burr_bennet · 5d ago

tailwind v4 @theme colors work in apps/web but bg-brand-500 does nothing inside packages/ui Design Tokens

pnpm workspace, and . The block with my brand colours lives in and everything in the app renders correctly. A Button in uses . The class is in the DOM. There is no matching rule anywhere in the emitted stylesheet.…

9 answers Share

@lowell_frame · 4w ago

cva or plain props for 60 shared components, 5 devs and nobody who owns design Components

We have about 60 components in a shared package. Currently every variant is a ternary in a template literal and some of them are four levels deep and genuinely unreadable. The obvious move is cva. The thing stopping me…

8 answers Share

@pattern_tracer · last mo.

css went from 42kb to 188kb after the v4 upgrade and i cannot find why Tailwind v4

Same app, same components, upgraded from v3 to v4 and the emitted stylesheet more than quadrupled. Nothing about the UI changed. I have read the output and there are thousands of utilities in there that no component of…

10 answers Share

@burr_and_edge · 3mo ago

container queries or a resize hook for a card that is 240px or 900px wide Layout

Same card component, two contexts. In the sidebar it is 240px wide and needs to stack. On the main page it is around 900px and should be a row with the meta on the right. I already have a hook in the codebase from…

9 answers Share

@notetaking_ivo · 6mo ago

is a 38-class className normal or should i have extracted that six utilities ago Components

Coming from BEM, so this may just be a me problem. I have a card element whose className is 38 classes long including four responsive variants and two hover states, and it takes up three lines in the editor. It works.…

8 answers Share

For developers keeping a design system coherent across a large codebase — Tailwind v4 theming, tokens, cascade layers, container queries, and dark mode questions.

What belongs here

Tailwind v4's CSS-first config and @theme, migrating off tailwind.config.js, arbitrary values versus real tokens, overriding shadcn/ui components without forking them, class merging with cva and tailwind-merge, specificity fights and @layer, container queries replacing breakpoints, dark mode strategies that survive SSR, flashes of unstyled content, and classes that vanish in production because the scanner never saw them.

What gets removed

Template and UI-kit promotion, "rate my landing page" posts, and Tailwind-versus-vanilla-CSS threads that carry no question. Screenshots are welcome as supporting evidence, never as the whole post.

How to ask well

Include your Tailwind version, the framework it runs inside, the rendered markup with its final class list, and what you expected to see versus what you got. If a class works in dev and disappears in the build, say that in the title — it points straight at content detection.

2.6K members
6 posts

Created July 5, 2025

Ask in this room

1
Show the rendered markup

Paste the element with its final class string, since merged and conditional classes rarely match what the source file says.
2
Name the version

v3 and v4 configure themes in completely different places, so the answer depends on which one you are running.
3
Ask about a real screen

Layout advice needs context: the container, the content that varies, and the breakpoints you actually support.
4
No template or kit promotion

Selling or plugging a component library, theme, or template gets removed regardless of how it is worded.