Need help with custom tailwind.config.js and extendTailwindMerge

[frankspin89]

Can't figure out how to correctly implement extendTailwindMerge with values from my custom tailwind.config.js.

custom tw merge function

const customTwMerge = extendTailwindMerge({
  theme: {
    maxWidth: ["8xl"],
    borderRadius: ["4xl"],
    colors: ["primary"],
  },
  classGroups: {
    fontSize: [
      { fontSize: ["h1", "h2", "h3", "h4", "h5", "h6", "titles", "display"] },
    ],
  },
});

export function cn(...inputs: ClassValue[]) {
  return customTwMerge(clsx(inputs));
}

tailwind.config.js

  theme: {
    extend: {
      maxWidth: {
        "8xl": "90rem",
      },
      borderRadius: {
        "4xl": "2.5rem",
      },
      fontFamily: {
        sans: ["DM Sans", "Inter", ...defaultTheme.fontFamily.sans],
      },
      boxShadow: {
        card: "0px 1px 2px -1px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10);",
      },
      fontSize: {
        xs: "0.75rem",
        sm: "0.875rem",
        base: "1rem",
        lg: "1.125rem",
        xl: "1.25rem",
        h6: "1.5rem",
        h5: "1.875rem",
        h4: "2.25rem",
        h3: "3.0rem",
        h2: "3.75rem",
        h1: "4.5rem",
        titles: "6rem",
        display: "8rem",
      },
      colors: {
        primary: {
          50: "rgba(242, 252, 218, 1)",
          100: "rgba(248, 248, 188, 1)",
          200: "rgba(216, 245, 143, 1)",
          300: "rgba(200, 240, 95, 1)",
          400: "rgba(190, 238, 68, 1)",
          500: "rgba(177, 234, 31, 1)",
          600: "rgba(153, 205, 19, 1)",
          700: "rgba(125, 168, 16, 1)",
          800: "rgba(83, 112, 10, 1)",
          900: "rgba(42, 56, 5, 1)",
        },
        gray: {
          50: "rgba(249, 250, 251, 1)",
          100: "rgba(243, 243, 247, 1)",
          200: "rgba(231, 231, 239, 1)",
          300: "rgba(210, 210, 225, 1)",
          400: "rgba(163, 163, 178, 1)",
          500: "rgba(125, 125, 140, 1)",
          600: "rgba(85, 85, 95, 1)",
          700: "rgba(60, 60, 65, 1)",
          800: "rgba(40, 40, 45, 1)",
          900: "rgba(15, 15, 20, 1)",
        },
        green: {
          50: "rgba(235, 255, 253, 1)",
          100: "rgba(31, 255, 233, 1)",
          200: "rgba(0, 245, 220, 1)",
          300: "rgba(0, 224, 202, 1)",
          400: "rgba(0, 204, 184, 1)",
          500: "rgba(0, 163, 147, 1)",
          600: "rgba(0, 122, 110, 1)",
          700: "rgba(0, 100, 90, 1)",
          800: "rgba(0, 82, 73, 1)",
          900: "rgba(0, 61, 55, 1)",
        },
      },
      keyframes: {
        slideDownAndFade: {
          from: { opacity: 0, transform: "translateY(-2px)" },
          to: { opacity: 1, transform: "translateY(0)" },
        },
        slideLeftAndFade: {
          from: { opacity: 0, transform: "translateX(2px)" },
          to: { opacity: 1, transform: "translateX(0)" },
        },
        slideUpAndFade: {
          from: { opacity: 0, transform: "translateY(2px)" },
          to: { opacity: 1, transform: "translateY(0)" },
        },
        slideRightAndFade: {
          from: { opacity: 0, transform: "translateX(-2px)" },
          to: { opacity: 1, transform: "translateX(0)" },
        },
      },
      animation: {
        slideDownAndFade:
          "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
        slideLeftAndFade:
          "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
        slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
        slideRightAndFade:
          "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
      },
    },
  },

[dcastil]

Hey @frankspin89! 👋

All the info on how to configure tailwind-merge is here: https://github.com/dcastil/tailwind-merge/blob/v1.14.0/docs/configuration.md

tailwind-merge doesn't support all theme keys, only a few are supported. A list of the supported keys is at https://github.com/dcastil/tailwind-merge/blob/v1.14.0/docs/configuration.md#theme.

Here is a breakdown of the config you need and why:

• maxWidth.8xl not needed as T-shirt sizes are supported by default: https://github.com/dcastil/tailwind-merge/blob/v1.14.0/src/lib/default-config.ts#L594
• borderRadius.4xl not needed as T-shirt sizes are supported by default: https://github.com/dcastil/tailwind-merge/blob/v1.14.0/src/lib/default-config.ts#L101
• fontFamily.sans not needed as any font-families are supported: https://github.com/dcastil/tailwind-merge/blob/v1.14.0/src/lib/default-config.ts#L654
• colors not needed as any colors are supported: https://github.com/dcastil/tailwind-merge/blob/v1.14.0/src/lib/default-config.ts#L96
• Rest is configured below

const customTwMerge = extendTailwindMerge({
  classGroups: {
    // https://github.com/dcastil/tailwind-merge/blob/v1.14.0/src/lib/default-config.ts#L1188
    shadow: ['shadow-card'],
    // https://github.com/dcastil/tailwind-merge/blob/v1.14.0/src/lib/default-config.ts#L619
    'font-size': [
      { text: ["h1", "h2", "h3", "h4", "h5", "h6", "titles", "display"] },
    ],
    // https://github.com/dcastil/tailwind-merge/blob/v1.14.0/src/lib/default-config.ts#L1381
    animate: [
      { animate: ['slideDownAndFade', 'slideLeftAndFade', 'slideUpAndFade', 'slideRightAndFade'] },
    ],
  },
})

[frankspin89]

@dcastil

Thank you for your detailed answer, this really helpt me understanding the right syntax. Would suggest to add few more detailed examples to the documentation.

Answers like the above are gold