Phase 11Intermediate12 of 28 in React

Styling React Apps

className and style, CSS Modules, Tailwind, CSS-in-JS, component libraries and headless UI, and animation that respects reduced motion.

React draws the page, but it has no opinion about how the page looks. It hands you two props, className and style, and leaves the rest to CSS. That freedom is why the React world has so many styling approaches: plain global stylesheets, CSS Modules, Tailwind utility classes, CSS-in-JS libraries, and ready-made component libraries. Each one answers the same questions differently: how do I stop one component's CSS from breaking another's, how do I change styles from state and props, and how much work does the browser do at runtime?

In this phase you'll learn each approach from the inside. You'll write a tiny clsx, simulate how a bundler turns .card into _card_x7f2a_1, build the cn() helper every Tailwind project uses, write a miniature styled() with useInsertionEffect to see exactly what runtime CSS-in-JS costs and why it clashes with Server Components, and compare MUI and Chakra with headless libraries such as Radix, React Aria and the copy-in components of shadcn/ui.

The last topic makes things move: CSS transitions driven by state, exit animations that keep an element mounted until it has faded out, the browser's View Transitions API with flushSync, the Motion library, and prefers-reduced-motion so movement never makes anyone feel ill. The CSS course (/css) teaches CSS itself; this phase is about how React and CSS fit together.

0/6 · 0%

6 topics ~3 h 18 code blocks & diagrams

Start with the first topic

11.1

className, style and Plain CSS

React styles elements with two props: className, a string of CSS class names you build from state, and style, an object of inline styles for truly dynamic values; ordinary CSS files and CSS variables do the rest.

24 min 1 diagram 2 code practice

11.2

CSS Modules

A CSS Module is a .module.css file whose class names the bundler renames to unique ones, so .title in one component can never clash with .title in another; you import the file as an object that maps your names to the generated ones.

24 min 3 code practice

11.3

Tailwind CSS with React

Tailwind is a CSS framework of small single-purpose classes (px-4, bg-teal-600, hover:bg-teal-700) that you combine in className; a build step generates only the classes you use, and a cn() helper merges conditional and conflicting classes.

25 min 3 code practice

11.4

CSS-in-JS

CSS-in-JS libraries such as styled-components and Emotion let you write CSS inside JavaScript components and compute it from props; runtime versions generate and inject styles in the browser on every render, which costs time and clashes with Server Components, so newer zero-runtime tools extract the CSS at build time.

27 min 3 code practice

11.5

Component Libraries and Headless UI

Component libraries give you ready-made, accessible buttons, dialogs, menus and tabs: styled kits like MUI and Chakra come with a look, headless libraries like Radix and React Aria give behaviour and accessibility with no styles, and shadcn/ui copies styled source files into your project so you own them.

26 min 2 code practice

11.6

Animation and Transitions

In React you animate by changing state and letting CSS transitions move between the old and new styles; exits need the element kept mounted until its animation ends, the View Transitions API animates whole DOM changes, the Motion library handles complex cases, and every animation must respect prefers-reduced-motion.

27 min 4 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

A status pill with conditional classes

Make the button with id="status" toggle between online and offline when clicked. It starts online.

Beginner

A volume bar with style and a CSS variable

The volume starts at 50. The - button (id="down") lowers it by 10 and the + button (id="up") raises it by 10, staying between 0 and 100.

Beginner

Use a CSS Module (simulated)

The styles object stands in for import styles from "./Card.module.css"; the CSS tab holds the generated rules. Never type the generated names yourself: always use styles.something.

Intermediate

Write cn() and fix the button overrides

The Button joins its base classes with the caller's className, so the overrides on Delete (id="danger") and Wide (id="wide") don't work: the base bg-teal-600 and px-4 still win.