I'm trying to understand how developers traditionally handled styling in component-based applications such as React before utility-first CSS became popular. Suppose there's a reusable button component used across several pages, but its appearance changes depending on the page or situation. Would you create a separate CSS module for each component, or use shared classes with variants? I like regular CSS because it is flexible and powerful, but I'm concerned about styles becoming difficult to scope, maintain, or prevent from overriding one another. Tailwind seems especially suited to component-based development, while vanilla CSS feels more natural for plain JavaScript and HTML. What approaches were commonly used before Tailwind, and what are the practical alternatives today?
4 Answers
Tailwind is essentially a large set of single-purpose utility classes. It can make local changes easy to see and avoids many cascade problems, but it also puts a lot of styling into the markup and can involve substantial repetition. You can still combine it with custom CSS for animations, design tokens, complex selectors, or reusable composite components. Likewise, conventional CSS can be made maintainable with variables, layers, naming conventions, scoped modules, and a well-defined component API.
Tailwind is one option, not a requirement. Before it, teams commonly used CSS Modules, Sass, BEM, SUITCSS, CSS-in-JS libraries, or ordinary global styles with carefully designed naming conventions. A reusable component might have a base class such as .button and modifier classes for its variants. CSS-in-JS and scoped styles solve the same general problem in different ways: keeping a component’s styles predictable and isolated. Each approach has tradeoffs, so the important part is choosing a consistent system rather than mixing methods randomly.
A separate stylesheet or CSS module per component is a perfectly normal approach, especially in React. You can keep the component’s base styles together and expose variants through classes or props, such as a primary, secondary, or compact button. CSS Modules prevent names from leaking into unrelated components, so having many small files is usually less dangerous than maintaining one huge global stylesheet. Frameworks such as Vue, Svelte, and Astro also support component-local styles directly, often with automatic scoping.
The main difficulty is not that CSS cannot work with components; it is managing the cascade as the application grows. A sensible setup might use global styles only for resets and tokens, component-level styles for structure, and explicit modifier classes for variants. With that structure, a button can be reused safely while each page passes a variant or adds a narrowly scoped wrapper. For plain HTML, server-rendered pages, or small projects, regular CSS may be simpler. For larger applications, Tailwind, CSS Modules, scoped styles, or another convention can all work if the team applies them consistently.
That clears up the distinction for me. It sounds like React leaves styling conventions to the developer, while some other component frameworks provide more built-in help with scoping.