Styling React Apps

styling with Vanilla CSS

advantages

• CSS code is decoupled with JSX code
• You write CSS code as you (maybe) know and (maybe) love it
• CSS code can be written by another developer who needs only a minimal amount of access to your JSX code

disadvantages

• You need to know CSS
• CSS code is not scoped to components: CSS rules may clash across components (e.g., same CSS class name used in different components for different purposes)

Scoping styles with CSS Modules

advantages

• CSS code is decoupled from JSX code
• You write CSS code as you (maybe) know and (maybe) love it
• CSS code can be written by another developer who needs only a minimal amount of access to your JSX code
• CSS classes are scoped to the component(files) which import them: No CSS class name clashes

disadvantages

• You need to know CSS
• You may end up with many relatively small CSS files in your project

CSS-in-JS Styling with “styled-components”

advantages

• Quick & easy to add
• You continue “thinking in React” (configurable style functions)
• Styles are scoped to components: No CSS rule clashes

disadvantages

• You need to know CSS
• No clear separation of React & CSS code
• You end up with many relatively small “wrapper” components

Styling with Tailwind Css

advantages

• You don’t need to know (a lot about) CSS
• Rapid development
• No style clashes between components since you don’t define any CSS rules
• Highly configurable & extensible

disadvantages

• Relatively long className values
• Any style changes require editing JSX
• You end up with many relatively small”wrapper” components OR lots of copy & pasting