React Workshop Series

Day 1 · Topic 9 of 15Teaching & theory

Foundations & build/Tailwind CSS Styling

Tailwind CSS Styling

Slide companion · 62–65

Your takeaway: Read Tailwind utilities inside className, change them, and predict how the card will look.

Making it look less ugly

Styling at the speed of thought

Old way — flip between HTML and CSS files

styles.css + JSX

1/* styles.css */
2.card {
3  background: white;
4  padding: 16px;
5  border-radius: 12px;
6}
7 
8// JSX
9<div className="card">...</div>

Tailwind — utility-first, right in the class name

One file. Read the classes.

1<div className="bg-white p-4 rounded-xl shadow-lg">
2  ...
3</div>
4 
5// Read the class names.
6// They say exactly what they do.

Decode one line of Tailwind

className breakdown

1<div className="bg-white p-4 rounded-xl shadow-lg">
2  ...
3</div>

bg-white→ background white

p-4→ padding of 4 units

rounded-xl→ very rounded corners

shadow-lg→ large drop shadow

Tailwind is designed to be readable.
Classes read like English.
When you forget a class, look it up in the Tailwind documentation.

Handy: Tailwind CSS CheatSheet

"Never memorize something that you can look up." Scan spacing, typography, flex, borders — copy the class you need.

Open the CheatSheet

Tailwind is written in className

The utilities sit directly on the JSX element, so they can feel like “inline styling”. Technically, React's inline-style API is the style={{ ... }} prop; today we use Tailwind utilities inside className instead.

Try it: change the card utilities

Change the background, rounding, padding, and shadow. Watch both the card and its generated className update immediately.

Tailwind playground

Change utility classes and watch the card

Mix one background, corner, padding, and shadow utility. Each class changes one visual job, so you can experiment without writing a separate CSS rule.

Tailwind goes in className

In React, write className="rounded-2xl bg-white p-5". The style={{ ... }}prop is React's inline CSS—it is not where Tailwind utility names go.

1. Background

2. Rounded corners

3. Padding

4. Shadow

Live profile-card preview

Alex's Profile

React beginner

I am learning how small Tailwind utilities combine into a complete design.

ReactNext.jsTailwind CSS

Generated classNameLive

<article className="mx-auto w-full max-w-sm border border-zinc-200 text-zinc-900 transition-all duration-200 motion-reduce:transition-none bg-white rounded-2xl p-5 shadow-lg" />

Choose a utility. The className and card preview update together.

Teaching cue: ask for a predictionShow note

Change one control at a time. Before selecting it, ask students whether it will affect colour, spacing, corners, or depth. Then let them choose their own combination and explain one class to a helper.

Styles not showing up later?

Save the file — Cmd+S / Ctrl+S. Your create-next-app project already includes Tailwind.

Starter classes

Common ones: text-xl, font-bold, bg-blue-500, rounded-lg, p-4, mt-2. Mix and match — that is the whole game.

Theory done — time to build