Why does the content array matter?

Tailwind scans the files in the content array to find which utility classes you actually use, then strips everything else from the final CSS. If a file is not covered by the globs, its classes will be missing in production.

What is the difference between class and media dark mode?

With darkMode set to class, dark styles apply when a .dark class is present, so you control the toggle yourself. With media, Tailwind follows the operating system prefers-color-scheme setting automatically with no toggle.

What does theme.extend do versus theme?

Putting values under theme.extend adds to Tailwind's defaults, so your custom colors sit alongside the built-in palette. Putting them directly under theme replaces the defaults entirely, which usually removes utilities you still want.

Do I need to install the plugins separately?

Yes. Enabling @tailwindcss/forms or @tailwindcss/typography in the config only references them; you still run npm install @tailwindcss/forms so the require call can resolve at build time.

Why is the config a module.exports CommonJS file?

Tailwind loads its config in a Node context where CommonJS is the safe default that works across project setups. The JSDoc type annotation gives editors autocomplete without needing TypeScript.

tailwind.config.js Builder

Scaffold a Tailwind config that fits your project

A tailwind.config.js does two critical jobs: it tells Tailwind which files to scan so it can tree-shake unused classes, and it lets you extend the default theme with your brand colors, fonts, and spacing. Getting the content globs wrong means missing styles in production; getting theme.extend wrong means accidentally deleting Tailwind’s defaults. This builder handles both correctly.

How it works

When you pick a framework, the tool fills the content array with the conventional globs for that stack — ./app/**/*.{js,ts,jsx,tsx,mdx} and friends for Next.js, the index.html plus src glob for Vite, the .astro glob for Astro. These patterns are what Tailwind walks to collect the class names actually present in your markup, so the generated CSS contains only what you use.

Your custom values are nested under theme.extend — never bare theme — so they add to rather than replace Tailwind’s built-in scales. Colors are emitted as quoted string values, font families as arrays so the browser can fall back through the stack, and extra spacing keys merge into the spacing scale. The darkMode strategy is written verbatim: "class" for a manual .dark toggle or "media" to follow the system preference. Enabled plugins are added as require() calls in the plugins array. Object keys that aren’t valid identifiers are automatically quoted so the file always parses.

Tips and notes

Keep custom color names semantic (brand, accent) so a rebrand is a single edit. If you enable a plugin here, remember to npm install it — the config only references the package. Prefer darkMode: "class" if you want a user-facing toggle; choose "media" for a hands-off, system-driven theme. After copying, restart your dev server so Tailwind picks up the new config, since it is read once at build start.

tailwind.config.js Builder

Email me this result

Scaffold a Tailwind config that fits your project

How it works

Tips and notes