Why I Stopped Using CSS-in-JS

CSS-in-JS was great for colocation and dynamic styles. Then bundle sizes grew, hydration got slower, and React Server Components arrived. The problem: most CSS-in-JS libraries inject styles at runtime. That means they cannot run in Server Components, and they add kilobytes of runtime cost to every page. I moved to Tailwind for utility classes and plain inline styles for truly dynamic values. The result: smaller bundles, faster paint, and components that work anywhere — server or client. The trade-off is losing the automatic scoping and TypeScript autocomplete for design tokens. I solved the first with a BEM-like naming convention and the second with a small tokens.ts file that exports typed constants. Not every project needs this. If you are building a heavily interactive dashboard that already ships a large JS bundle, CSS-in-JS cost is negligible. But for a content-heavy site that should load fast on mobile, it matters.