Custom Config

Tailwind · Reference cheat sheet

📋 Overview

Customize Tailwind via theme.extend (preserve defaults) or replace theme keys. Content paths, plugins, and dark mode strategy live in the same config (v3) or CSS-first config (v4).

🔧 Core concepts

💡 Examples

Extend theme (v3):

export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        brand: { DEFAULT: "#0F766E", light: "#5EEAD4" },
      },
      fontFamily: {
        display: ["\"Fraunces\"", "serif"],
      },
    },
  },
};

Use tokens:

<h1 class="font-display text-brand">Hello</h1>

Prefix:

export default { prefix: "tw-", content: ["./src/**/*.{html,js}"] };
// classes become tw-flex, tw-p-4, ...

⚠️ Pitfalls

• Replacing theme.colors entirely removes the default palette — use extend.
• Wrong content globs silently drop utilities.
• Arbitrary values don't need config — but shared brand tokens should be themed.

🔗 Related

• plugins.md
• getting_started.md
• colors.md
• responsive.md