What is the difference between theme and theme.extend?

Keys placed directly under theme replace Tailwind's default scale entirely for that property, so you lose the built-in values. Keys under theme.extend are merged on top of the defaults, adding your tokens while keeping the originals. Use extend unless you deliberately want to reset a scale.

What does the content key do?

content lists the glob paths Tailwind scans for class names. Only classes it finds there are included in the output CSS, which is how Tailwind keeps bundles small. Missing or wrong paths cause classes to be purged and styles to vanish in production.

How does darkMode work?

darkMode accepts 'media' (default) to follow the OS prefers-color-scheme, or 'class' to toggle dark styles when a dark class is present on a parent like html. The class strategy lets you build a manual theme switch instead of relying on the system setting.

What goes in the plugins array?

plugins takes an array of Tailwind plugin functions, such as require('@tailwindcss/forms'), or inline plugins created with the plugin() helper to register custom utilities, components and variants. Plugins run at build time and can read the resolved theme.

Does this tool generate a config?

No. It is an offline reference of the configuration keys and their types. You still write the actual tailwind.config.js yourself.

Tailwind CSS Config Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

What every tailwind.config.js key does

A tailwind.config.js file customises the design tokens, scanned files and build behaviour of Tailwind CSS. This reference lists the top-level configuration keys with their value type and purpose, and explains the crucial theme versus theme.extend distinction, searchable by key name.

How it works

Tailwind reads the exported config object at build time, resolves the theme (defaults merged with your customisations), scans the content globs for class names and emits only the utilities it finds:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  darkMode: "class",
  theme: {
    extend: {
      colors: { brand: "#0a7" },
      spacing: { 18: "4.5rem" },
    },
  },
  plugins: [require("@tailwindcss/forms")],
};

Values under theme.extend are merged on top of the defaults, while values placed directly under theme replace a default scale. prefix, important and darkMode tune output; plugins registers extra utilities.

Tips and notes

Prefer theme.extend so you keep Tailwind’s default scales.
Keep content globs tight but complete — missing paths silently drop classes.
darkMode: "class" enables a manual theme toggle; "media" follows the OS.
prefix: "tw-" namespaces every utility to avoid collisions with other CSS.
Tailwind v4 moves much config into CSS @theme; this reference targets the JS config (v3-style).