Create custom merge function to support custom utility classes (extended theme)

[charkour]

Hello, thanks for this awesome package.

I noticed an issue with the twMerge function when using custom box shadow classes.

// Actual
twMerge('shadow-md shadow-lg shadow-light shadow-dark') // 'shadow-lg shadow-light shadow-dark'

// Expected 
twMerge('shadow-md shadow-lg shadow-light shadow-dark') // 'shadow-dark'

This works properly with the normal box shadow classes.

Perhaps I to make a custom tailwind merge function with the light and dark suffixes? Thanks.

[charkour]

Inside the tailwind.config.js file:

module.exports = {
    mode: 'jit',
    theme: {
        extend: {
            boxShadow: {
                'dark': '0 3px 8px #ccc',
                'light': '0px 2px 5px 0px HSLA(0, 0%, 84.3%, 0.5);',
            },
        },
    },
};

[charkour]

Looking through the source code, it looks like I need to create a custom tailwind merge function. How would that be done to only add the box shadow custom classes?

[dcastil]

Hi @charkour! Indeed, if you're using a custom Tailwind config, you need to use createTailwindMerge and create a config for it. You don't need createTailwindMerge in all cases, but in this one yes.

Here is how to create it in v0.7.1:

import { createTailwindMerge } from 'tailwind-merge'

export const twMerge = createTailwindMerge((getConfig) => {
    const config = getConfig()

    config.classGroups.shadow.push({ shadow: ['light', 'dark'] })

    return config
})

In v0.8.0 which will be released soon you can do it a little cleaner (use #48 (reply in thread) instead):

import { createTailwindMerge, getDefaultConfig, mergeConfigs } from 'tailwind-merge'

export const twMerge = createTailwindMerge(() =>
    mergeConfigs(getDefaultConfig(), {
        classGroups: {
            shadow: [{ shadow: ['light', 'dark'] }],
        },
    })
)

If you're wondering where that class group name shadow comes from, it is specified in the default config here. So far there is no straight forward way to figure out which property to access but to look into the source code.

Let me know if that helps.

[dcastil]

Your version v0.7.1 almost worked

Ah yeah, sorry about that, completely forgot about TypeScript there. 😁

[dcastil]

I just released v0.8.0. You can now extend your config much simpler:

import { extendTailwindMerge } from 'tailwind-merge'

const twMerge = extendTailwindMerge({
    classGroups: {
        shadow: [{ shadow: ['light', 'dark'] }]
    }
})

[charkour]

Tailwind also writes about it that the Tailwind config can get big and it's probably not a good idea to put that in client-side code.

Yup, I totally agree. That makes sense. I did not think that through initially when I wrote my first comment.

Currently, the only solution is to write a config twice (once for buildtime and once for runtime), while the buildtime config is optimized for convenience and the runtime config is optimized for bundle size.

That completely makes sense. I have a somewhat crazy idea, but what if there was a way during build time to fix the tailwind utility class precedence static component classNames. For example, let's say there is a StyledButton and SmallRedButton that extends the BaseButton component.

const BaseButton = ({className}) => {
  return <button className={twMerge("text-red", className)} />
}

const StyledButton = () => {
  return <BaseButton className="text-blue bg-white" />
}

const SmallRedButton = () => {
  return <SmallRedButton className="bg-white w-8" />
}

At build time, we know that <StyledButton /> will have the className of text-blue bg-white and <SmallRedButton /> will have text-red bg-white w-8. Therefore, at build time, we could rewrite the components to not be dependent on <BaseButton /> since the potential for dynamic behavior is actually known at build time.

const StyledButton = () => {
  return <button className="text-blue bg-white" />
}

const SmallRedButton = () => {
  return <button className="text-red bg-white w-8" />
}

Writing this out, this is for sure out of scope for this project, and this idea might not even work due to React's rendering method with the VDOM (I'm not sure how Vue's rendering method works). I've just noticed that in many cases at build time the seemingly dynamic output can be known ahead of runtime. What are your thoughts on the subject?

[charkour]

I just released v0.8.0

This works great. Thank you!

[dcastil]

I like your idea! I actually see my library as the MVP of a more React-specific version of Tailwind. As you said as well, I think that static analysis is out of scope for this project because that can get hella complicated! 😄 But I hope that someone comes around and builds something that makes React and Tailwind work better together.

[charkour]

This is perfect, I had something similar to your v0.8.0 snippet and then realized getDefaultConfig wasn't exported in the latest released version (v0.7.1).

Thanks for the quick response!

[dcastil]

Yeah 😄 I also think that this is still way too cumbersome and created #47. That will be in v0.8.0 as well.

[dcastil]

Moving this to discussions as this isn't a bug in tailwind-merge.

[nenostra]

Hello @dcastil , if I have custom space in my tailwind.config, is there a way to extend twMerge without having to individually define padding, margin, width, height, maxHeight, gap, inset, space, and translate? Same for other tailwind.config values like borderRadius. Really appreciate the work you are doing and let me know if I can help in any way to implement something like this.

[dcastil]

Hey @nenostra! 👋

At the moment there isn't a way to extend the spacing scale easily unfortunately. As you said, you need to extend all these class groups yourself.

That isn't great, I think this should be easier. I created an issue in #54 to keep track of this. So far I'm not sure how to do this to allow as many scales as possible without increasing the bundle size a lot. I'll think about it in the coming days so I can come up with something decent. If you have any ideas on the topic, feel free to discuss it in the issue!

Would you mind sharing your Tailwind config? Would be interesting to know which spacing and border radius values you use.

[nenostra]

Here it is @dcastil, and tyvm for taking a look at this. Will also start reading the codebase and think about how to make something like this easier if possible.
on theme.js:

const breakpoints = {
  sm: '576px',
  md: '768px',
  lg: '992px',
  xl: '1200px',
};

const spacing = {
  auto: 'auto',
  '0': '0px',
  '2xs': '4px',
  xs: '10px',
  '2sm': '15px',
  sm: '20px',
  md: '24px',
  lg: '30px',
  xl: '40px',
  '2xl': '60px',
  '3xl': '100px',
  '4xl': '130px',
  '5xl': '160px',
  '6xl': '250px',
};

const buttonWidths = {
  'button-default': '185px',
  'button-small': '150px',
  'button-large': '240px',
  'button-fluid': '100%',
};

const containerWidths = {
  'container-md': '750px',
  'container-lg': '970px',
  'container-xl': '1170px',
};

const modalWidths = {
  'large-modal-lg': '920px',
  'large-modal-md': '730px',
  'default-modal': '730px',
  'small-modal': '540px',
};

const heights = {
  header: '60px',
};

const palette = {
  black: '#000000',
  'light-navy': '#fafbfc',
  navy: '#325e77',
  'dark-navy': '#0f2532',
  'lighter-green': '#c2f7e4',
  'light-green': '#5bbe9b',
  green: '#3ee4a9',
  'dark-green': '#3aa680',
  'light-gray': '#fafbfc',
  gray: '#d6e1e4',
  'dark-gray': '#8ea0a4',
  red: '#ff5661',
  'dark-red': '#c71d28',
  'green-translucent': 'rgba(62, 228, 169, 0.8)',
  'dark-navy-translucent': 'rgba(15, 37, 50, 0.9)',
  orange: '#ff9c00',
  white: '#fff',
  transparent: 'transparent',
};

const fontWeight = {
  regular: 400,
  semibold: 600,
};

const letterSpacing = {
  lg: '0.5px',
  sm: '0.3px',
};

const fontSize = {
  'h1-lg': '54px',
  'h1-md': '42px',
  'h1-sm': '32px',

  'h2-lg': '36px',
  'h2-md': '28px',
  'h2-sm': '26px',

  'h3-lg': '24px',
  'h3-md': '22px',
  'h3-sm': '20px',

  body: '16px',
  p1: '12px',
  p2: '10px',
};

const lineHeight = {
  'h1-lg': '62px',
  'h1-md': '50px',
  'h1-sm': '38px',

  'h2-lg': '44px',
  'h2-md': '32px',
  'h2-sm': '32px',

  'h3-lg': '32px',
  'h3-md': '30px',
  'h3-sm': '28px',

  body: '24px',
  p1: '20px',
  p2: '14px',
};

const boxShadow = {
  DEFAULT: '0px 1px 6px 0px rgba(50, 94, 119, 0.26)',
  card: '0 2px 30px 0 rgba(0, 0, 0, 0.4)',
  button: '0 5px 10px rgba(62, 228, 169, 0.3)',
};

const borderRadius = {
  none: '0',
  small: '4px',
  DEFAULT: '8px',
  full: '9999px',
};

const transitionDuration = { hover: '400ms' };

then on tailwind.config:

theme: {
    screens: breakpoints,
    fontFamily: {
      sans: ['Montserrat', 'sans-serif'],
    },
    colors: palette,
    fontSize,
    spacing,
    lineHeight,
    fontWeight,
    letterSpacing,
    borderRadius,
    transitionDuration,
    extend: {
      height: {
        ...heights,
      },
      width: {
        ...buttonWidths,
        ...containerWidths,
        ...modalWidths,
      },
    },
  },