Styling in React (CSS Modules, Styled Components & Tailwind)
5 questions foundWhat are CSS Modules and how do they prevent class names from clashing between components?
Beginner A CSS Module is a regular CSS file where every class name is automatically made unique behind the scenes during the build process, so a class name like button used in one component's CSS file never accidentally conflicts with a class of the same name used in a completely different component.
/* Button.module.css */
.button {
background-color: blue;
color: white;
}
// Button.js
import styles from './Button.module.css';
function Button() {
return <button className={styles.button}>Click Me</button>;
}
Real-world example A large app with dozens of components each has their own small CSS Module file, safely reusing common class names like container or title everywhere without ever worrying about accidental style conflicts.
Common follow-ups: How does a CSS Module actually make class names unique behind the scenes?;Can you share common styles between two different CSS Modules?
Components & JSX;Design Patterns in React
How does styled components let you write CSS directly inside your JavaScript files?
Intermediate Styled components lets you write actual CSS inside a special template literal attached to a component definition, creating a real React component with those styles automatically applied. This keeps a component's structure and its specific styles closely tied together in the same file.
import styled from 'styled-components';
const Button = styled.button`
background-color: blue;
color: white;
padding: 10px 20px;
`;
function App() {
return <Button>Click Me</Button>;
}
Real-world example A design team builds a reusable Button styled component with consistent padding and colors, and every page in the app imports and uses that exact same component, keeping the button's appearance perfectly consistent everywhere.
Common follow-ups: How does styled components handle changing styles based on a prop, like a different color?;What is the performance cost, if any, of writing CSS this way compared to a plain CSS file?
Component Composition & Children Props;Design Patterns in React
What is Tailwind CSS and how does its approach differ from writing traditional custom CSS?
Intermediate Tailwind CSS provides many small, single purpose utility classes, like flex, text center, or bg blue 500, that you combine directly in your JSX to build a design, instead of writing your own separate custom CSS classes and rules for every single element.
function Card() {
return (
<div className="bg-white rounded-lg shadow-md p-4">
<h2 className="text-xl font-bold">Product Name</h2>
<p className="text-gray-600">Product description here</p>
</div>
);
}
Real-world example A team builds an entire product card's layout and styling directly inside its JSX using Tailwind's utility classes, without writing a single separate CSS file for that specific component.
Common follow-ups: What is the main criticism people have about Tailwind's approach of adding many classes directly in JSX?;How does Tailwind keep its final CSS file small despite offering so many utility classes?
Components & JSX;Build Tools & Bundlers (Vite Webpack & CRA)
How would you conditionally apply different CSS classes based on a component's state, such as showing an active style?
Advanced You build the class name string dynamically based on your current state or props, often using a small helper library like clsx or classnames to make combining multiple conditional classes cleaner and easier to read than manually joining strings together.
import clsx from 'clsx';
function Tab({ isActive, label, onClick }) {
return (
<button
className={clsx('tab', { 'tab-active': isActive })}
onClick={onClick}
>
{label}
</button>
);
}
Real-world example A tabs component highlights whichever tab is currently selected by conditionally adding an extra tab active class, using the clsx library to keep the conditional class logic clean and easy to read.
Common follow-ups: How would you write this same conditional class logic without using a helper library?;What other common use cases does a library like clsx handle well?
Conditional Rendering & Lists (Keys);Design Patterns in React
What is a general guideline for choosing between plain CSS, CSS Modules, styled components, and Tailwind for a new project?
Beginner Plain CSS or CSS Modules work well for teams that already know CSS well and prefer keeping styles in separate files. Styled components fit teams that want styles and component logic living together in the same file. Tailwind suits teams that want to build and adjust designs quickly, directly inside their JSX, without switching between files. There is no single correct choice, since it depends heavily on team preference and project needs.
// The same button, expressed in three different popular approaches
// CSS Module: <button className={styles.button}>
// Styled components: <StyledButton>
// Tailwind: <button className="bg-blue-500 text-white px-4 py-2 rounded">
Real-world example A new startup building their first product quickly settles on Tailwind for fast, iterative design changes, while an established enterprise team with strong existing CSS conventions sticks with CSS Modules for their new features.
Common follow-ups: Can different styling approaches be mixed together within the same project?;What factors besides personal preference should influence this decision for a real team?
Design Patterns in React;Build Tools & Bundlers (Vite Webpack & CRA)