Defining Custom Spacing Scale with extendTailwindMerge

[jeniabrook]

Hi everyone,

I'm trying to define a custom spacing scale in a twMerge config using extendTailwindMerge. While I successfully configured a custom font-size scale, I'm stuck with the spacing property.

Here’s how I’m overriding the spacing:

{
  theme: {
    spacing: {
      /* Spacing */
      "sp-1": "var(--fui-sp-1)",
      "sp-2": "var(--fui-sp-2)",
      "sp-3": "var(--fui-sp-3)",
      "sp-4": "var(--fui-sp-4)",
      "sp-5": "var(--fui-sp-5)",
      "sp-6": "var(--fui-sp-6)",
      "sp-7": "var(--fui-sp-7)",
      "sp-8": "var(--fui-sp-8)",
      "sp-9": "var(--fui-sp-9)",

      /* Sizing */
      "s-1": "var(--fui-s-1)",
      "s-2": "var(--fui-s-2)",
      "s-3": "var(--fui-s-3)",
      "s-4": "var(--fui-s-4)",
      "s-5": "var(--fui-s-5)",
      "s-6": "var(--fui-s-6)",
      "s-7": "var(--fui-s-7)",
      "s-8": "var(--fui-s-8)",
      "s-9": "var(--fui-s-9)",
      "s-10": "var(--fui-s-10)",
    },
  },
}

The goal is to make twMerge recognize and merge these custom spacing values properly. However, I'm unsure how to set up the configuration correctly for this to work.

Has anyone successfully configured custom spacing scales in twMerge? Any guidance or examples would be greatly appreciated!

Thanks in advance! 😊

[jkinley]

I too am having the same issue. I want to use t-shirt sizing for spacing values. Here is my custom config, but this is not working. This is my first time trying to customize twMerge. Any ideas?

import { extendTailwindMerge } from 'tailwind-merge';

export const twMerge = extendTailwindMerge({
  theme: {
    spacing: ['sm', 'md', 'lg'], // Add your t-shirt scale
  },
  classGroups: {
    spacing: [
      'p', 'px', 'py', 'pt', 'pr', 'pb', 'pl', // Padding
      'm', 'mx', 'my', 'mt', 'mr', 'mb', 'ml', // Margin
    ],
  },
  conflictingClassGroups: {
    // Conflicts for spacing utilities
    spacing: ['p', 'px', 'py', 'pt', 'pr', 'pb', 'pl'],
  },
});

[jkinley]

So, since I am extending the config, I discovered that the structure needs to be like this and I don't think I need the classGroup rules.

import { extendTailwindMerge } from "tailwind-merge";

export const twMerge = extendTailwindMerge({
  extend: {
    theme: {
      spacing: ["sm", "md", "lg"], // Define t-shirt sizes
    },
  },
});

[jeniabrook]

Yep figured out it also, the docs are a bit confusing.

I've written a custom plugin for our design system at the company, I'm getting all the custom classes from there and mapping over them:

const themeFontSize = plugin.config?.theme?.fontSize ?? {};
const themeSpacing = plugin.config?.theme?.spacing ?? {};

const customTwMerge = extendTailwindMerge({
  extend: {
    theme: {
      spacing: Object.keys(themeSpacing),
    },
    classGroups: {
      "font-size": Object.keys(themeFontSize).map((key) => `text-${key}`),
    },
  },
});

[dcastil]

Hey @jeniabrook and @jkinley! 👋

Thanks for your patience! You basically figured it out already. tailwind-merge sometimes supports the theme scale and sometimes only the class group. It's a bit confusing indeed, but all for bundle size reasons because all this code needs to be sent to the browser.

If you want to have T-shirt sizes in the spacing scale, you can also do this:

import { extendTailwindMerge, validators } from 'tailwind-merge'

const twMerge = extendTailwindMerge({
    extend: {
        theme: {
            spacing: [validators.isTshirtSize]
        }
    }
})

That will allow all T-shirt sizes and even values like 123xl or 0.5md.

[jkinley]

So my goal was to be able to use t-shirt sizing to spacing values in Tailwind. The reason I was doing this was to integrate https://utopia.fyi/ for fluid type and spacing. The text scale works as is, but I was having trouble with the spacings. Here is the config file that I used to extend twMerge:

import { extendTailwindMerge } from 'tailwind-merge';

export const twMerge = extendTailwindMerge({
  extend: {
    theme: {
      // Add t-shirt sizes to the spacing scale
      spacing: ['sm', 'md', 'lg', 'sm-lg', 'lg-2xl']
    }
  }
});

So far, it even seems to be working with the weird utility classes that Utopia requires, such as 'm-sm-lg' and py-2xl-4xl'.

So this:

    <div className="h-screen grid place-content-center">
      <div className={twMerge('border border-red-500 p-sm-lg p-lg-2xl')}>
        <h1 className={twMerge('text-sm text-lg')}>Test</h1>
      </div>
    </div>
    

Returns this