Setting Up Tailwind CSS
In this page:
<div className="utility-one utility-two utility-three">
Content
</div>
// tailwind.config.js
module.exports = {
content: ["./src/**/*.{js,jsx}"],
};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.
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.
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 in your own terminal or Node.js environment.
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.
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: