Setting Up Tailwind CSS
In this page:
What 'Utility-First' Means
Instead of writing custom CSS classes with their own rules (like '.card { padding: 16px; }'), Tailwind provides many small, single-purpose utility classes (like p-4 for padding) that you compose directly in your JSX's className. Styling happens by combining these small pieces, rather than writing new CSS.
Note: Tailwind's utility classes map predictably to CSS values — p-4 means padding of 1rem, text-lg means a larger font size, and so on.
Warning: It's a build-tool-based framework — it needs to be installed and configured, and can't run from this CDN-only preview sandbox.
Example: What 'Utility-First' Means
// Run in your local React project (npm install required)
function Card() {
return (
<div className="p-4 bg-white rounded shadow">
<h2 className="text-lg font-bold">Card Title</h2>
<p className="text-gray-600">Card content here.</p>
</div>
);
}Configuring the Content Paths
Tailwind only includes CSS for classes it actually finds referenced in your project's files, keeping the final CSS bundle small. The content array in tailwind.config.js tells it exactly which files to scan for class names — missing a path here means those classes silently won't work.
Note: Include every file type where you write JSX, like './src/**/*.{js,jsx,ts,tsx}', to make sure nothing gets missed.
Warning: Forgetting to include a folder in content means Tailwind strips out any classes only used in that folder, and those elements will appear completely unstyled.
Example: tailwind.config.js Content Paths
$ cat tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}⚠️ Run this command in your terminal.
Combining Multiple Utility Classes
A real component typically combines many small utility classes together in one className string — spacing, color, typography, and layout classes all side by side — to build up the final appearance, rather than writing one custom class per component.
Note: For long class lists, tools like the Tailwind Prettier plugin can auto-sort classes into a consistent order for readability.
Warning: Very long className strings can become hard to scan visually — some teams extract repeated combinations into a small reusable component instead.
Example: Combining Multiple Utility Classes
// Run in your local React project (npm install required)
function Button({ children }) {
return (
<button className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded font-semibold">
{children}
</button>
);
}- Forgetting to configure the content paths in tailwind.config.js, so Tailwind doesn't scan your component files and strips out classes you're actually using.
- Writing custom CSS out of habit instead of composing Tailwind's existing utility classes.
- Not running the build step, so raw Tailwind directives (@tailwind base;) never get compiled into real CSS.
- Tailwind CSS is a utility-first CSS framework: you compose small, single-purpose classes directly in your JSX.
- It requires a build-step setup (PostCSS, or Vite's built-in Tailwind plugin), not just a CDN link, for production use.
- The config file's content array tells Tailwind which files to scan for class names it should keep.
- Common utilities include spacing (p-4), color (bg-blue-500), and layout (flex, grid) classes.
Requires npm install tailwindcss (or the Vite plugin) — not available via CDN build tooling in this sandbox.
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: