{"id":"l-rf-4-2","courseId":"react-fundamentals","lang":"en","kind":"lesson","summary":"Add Tailwind CSS v4 to the Vite project with its official plugin, style the Watchlist with utility classes and state variants, and customise the theme in CSS.","html":"

The Watchlist works, and it looks like 1998. You could write a stylesheet, and plenty of excellent apps do. This course uses Tailwind CSS, because it’s extremely common in React codebases you’ll join, and because styling right in your JSX keeps components self-contained: a MovieItem file holds its markup, its behaviour and its look.

\n

Tailwind is a large set of small utility classes, each doing one thing: p-4 adds padding, rounded-lg rounds corners, text-slate-600 sets a color. You compose them in className. Tailwind scans your files, finds the classes you used, and generates a stylesheet containing only those.

\n

Install it

\n

Tailwind v4 has an official Vite plugin, and setup is three steps. Install the packages:

\n
Terminal
npm install tailwindcss @tailwindcss/vite
\n

Add the plugin to your Vite config:

\n
vite.config.js
import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport tailwindcss from '@tailwindcss/vite';\n\nexport default defineConfig({\n  plugins: [react(), tailwindcss()],\n});
\n

And import Tailwind at the top of your main stylesheet, which main.jsx already imports:

\n
src/index.css
@import \"tailwindcss\";
\n

That’s all. There’s no tailwind.config.js and no PostCSS config in v4 by default. Tailwind finds your source files on its own. Vite restarts the dev server by itself when you save vite.config.js; if the styles still don’t appear, stop it and run npm run dev again.

\n\n

Reading utility classes

\n

Here’s the Watchlist shell:

\n
src/App.jsx
<main className=\"mx-auto max-w-xl px-4 py-10\">\n  <h1 className=\"text-3xl font-bold tracking-tight text-slate-900\">Watchlist</h1>\n  <p className=\"mt-1 text-sm text-slate-500\">{left} to watch</p>\n  {/* …form, filters, list */}\n</main>
\n

The names are terse but systematic, and after a day you’ll read them as fast as CSS:

\n\n

Your editor can help: the official Tailwind CSS IntelliSense extension for VS Code autocompletes class names and shows the CSS each one produces on hover.

\n

Variants: conditions in a prefix

\n

Prefix a class to apply it only under a condition:

\n
src/components/MovieItem.jsx
<li className=\"flex items-center gap-3 rounded-lg border border-slate-200 bg-white p-3 dark:border-slate-700 dark:bg-slate-800\">\n  <span className={movie.watched ? 'flex-1 text-slate-400 line-through' : 'flex-1 text-slate-900 dark:text-slate-100'}>\n    {movie.title}\n  </span>\n  <button\n    aria-pressed={movie.watched}\n    onClick={() => onToggle(movie.id)}\n    className=\"rounded-md border border-slate-300 px-3 py-1 text-sm hover:bg-slate-100 focus-visible:outline-2 focus-visible:outline-indigo-500 aria-pressed:border-indigo-600 aria-pressed:bg-indigo-600 aria-pressed:text-white\"\n  >\n    {movie.watched ? 'Watched' : 'Mark watched'}\n  </button>\n</li>
\n\n

Conditions that depend on React state, like movie.watched on the span, are a plain ternary choosing between two complete class strings.

\n\n

Your own design tokens

\n

Customise the theme in CSS with @theme. Each variable becomes utilities automatically:

\n
src/index.css
@import \"tailwindcss\";\n\n@theme {\n  --color-brand-500: oklch(0.62 0.19 285);\n  --color-brand-600: oklch(0.55 0.21 285);\n  --font-display: \"Inter\", system-ui, sans-serif;\n}
\n

Now bg-brand-600, text-brand-500 and font-display work like built-in classes. Define a handful of tokens for your brand color and fonts rather than scattering one-off values like bg-[#6d28d9] through your components.

\n

The trade-off

\n

Long class lists are the honest cost. A styled button can carry fifteen classes. The answer isn’t to hide them in CSS with @apply; it’s what you’ve practised all course: extract a component. A Button component holds those fifteen classes in one place, and everywhere else you write <Button>. Components are your unit of reuse in React, for styles as much as for behaviour.

\n

Tailwind isn’t the only good answer. CSS Modules (built into Vite: name a file MovieItem.module.css and import it) give you scoped class names with ordinary CSS, and many teams prefer them. The skills transfer either way: semantic markup, a consistent spacing and color scale, visible focus states and a layout that works on a phone first.

\n\n

The Watchlist looks like a real product now. One thing left: getting it onto the internet, which is the next lesson.

\n","toc":[{"id":"sec-1","text":"Install it","level":2},{"id":"sec-2","text":"Reading utility classes","level":2},{"id":"sec-3","text":"Variants: conditions in a prefix","level":2},{"id":"sec-4","text":"Your own design tokens","level":2},{"id":"sec-5","text":"The trade-off","level":2}],"takeaways":["Tailwind v4 needs npm install tailwindcss @tailwindcss/vite, the plugin in vite.config.js, and @import "tailwindcss"; in your CSS; no config file is required.","Utility classes map to single CSS declarations on a shared scale, such as p-4 for 1rem of padding and text-slate-600 for a palette color.","Prefixes apply a class conditionally, for example md: above a breakpoint, hover: on hover, dark: in dark mode and aria-pressed: when that attribute is true.","Tailwind finds classes by scanning your files as text, so always write complete class names and never build them with string interpolation.","Customise colors, fonts and other tokens with CSS variables in an @theme block."],"further":[{"title":"Installing Tailwind CSS with Vite","url":"https://tailwindcss.com/docs/installation/using-vite"},{"title":"Styling with utility classes","url":"https://tailwindcss.com/docs/styling-with-utility-classes"},{"title":"Detecting classes in source files","url":"https://tailwindcss.com/docs/detecting-classes-in-source-files"},{"title":"Theme variables","url":"https://tailwindcss.com/docs/theme"}],"quiz":[{"q":"

You installed both packages and added @import "tailwindcss"; to src/index.css, but no utility classes have any effect. What’s the most likely missing step?

","options":[{"text":"Creating a tailwind.config.js file.","why":"Tailwind v4 works without a config file; it detects your source files automatically."},{"text":"Adding a PostCSS config file.","why":"With Vite, the @tailwindcss/vite plugin replaces the PostCSS setup. You don’t need both."},{"text":"Restarting your computer.","why":"Restarting the dev server can help after config changes, but the computer isn’t the issue."},{"text":"Adding tailwindcss() from @tailwindcss/vite to the plugins array in vite.config.js.","why":"Correct. Without the plugin, Vite treats the import as plain CSS and never generates the utilities."}],"answer":3},{"q":"

A component builds a class as `text-${color}-600` where color is ‘red’ or ‘green’. In production the text has no color. Why?

","options":[{"text":"Tailwind scans files as plain text, sees no complete text-red-600 or text-green-600, and never generates them.","why":"Correct. Map values to complete class names instead, for example { red: 'text-red-600', green: 'text-green-600' }[color]."},{"text":"Template literals aren’t allowed in className.","why":"Any string works in className. The problem is that Tailwind can’t see the final class name when it builds the CSS."},{"text":"The 600 shade doesn’t exist for red and green.","why":"Every default palette color has shades from 50 to 950, including 600."},{"text":"Production builds strip all Tailwind classes that come from props.","why":"Tailwind doesn’t know about props. It only keeps classes that appear in full somewhere in your source files."}],"answer":0},{"q":"

What does className="bg-white md:bg-slate-100 dark:bg-slate-900" do?

","options":[{"text":"Applies all three backgrounds at once, and the last one wins.","why":"The prefixed classes only apply under their conditions; they don’t simply stack."},{"text":"White on small screens, slate-100 from the md breakpoint up, slate-900 in dark mode.","why":"Correct. Breakpoint prefixes are mobile-first (min-width), and dark: follows the user’s color scheme preference by default."},{"text":"It’s invalid; you can only use one background class per element.","why":"You can combine as many classes as you need; variants exist precisely so that one element can have different styles in different conditions."}],"answer":1},{"q":"

Your filter buttons set aria-pressed. What’s the cleanest way to style the active one with Tailwind?

","options":[{"text":"Compute the class in JavaScript with `bg-${active ? 'indigo' : 'white'}-600`.","why":"That builds a class name dynamically, which Tailwind can’t detect. It’s also not needed here."},{"text":"Use style={{ background: … }} because Tailwind can’t react to state.","why":"Tailwind has variants for exactly this. Inline styles also lose hover, focus and dark-mode handling."},{"text":"Use the aria-pressed: variant, for example aria-pressed:bg-indigo-600 aria-pressed:text-white.","why":"Correct. The styling follows the accessibility attribute you already set, so the visual state and what screen readers announce can’t disagree."}],"answer":2}],"exercise":{"kind":"fill","language":"js","template":"// Terminal\n// npm install {{0}} @tailwindcss/vite\n\n// vite.config.js\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport tailwindcss from '{{1}}';\n\nexport default defineConfig({\n plugins: [react(), {{2}}],\n});\n\n/* src/index.css */\n@import \"{{3}}\";\n\n// src/components/FilterButton.jsx: style the active filter\n