How to make it work with @apply?

[DonHuskini]

I use CSS Modules + Tailwind and I use @apply to add my classes in CSS however tailwind-merge seems to not override those classes. Is there a way to make it work?

.blue { @apply bg-blue-500 }
.red { @apply bg-red-500 }

import s from './Button.module.css'
const Button = ({ color, children, className }) => {
  <button className={twMerge(s[color], className)}>
    {children}
  </button>
}

// Doesn't override
<Button color='blue' className='bg-yellow-500'>
  Something
</Button>

https://stackblitz.com/edit/github-hjypmo-re6jq8?file=pages/index.tsx

[charkour]

I'm not sure if tailwind-merge will have an elegant way to solve this issue. twMerge compares strings, so in your case, it is comparing bg-yellow-500 and random-class-name-generated-by-css-modules, thus they are not conflicting.

By using the cascading rules of CSS, you can achieve the desired behavior by changing the order the classes are merged. The code below should solve the issue.

import s from './Button.module.css'
const Button = ({ color, children, className }) => {
  <button className={twMerge(className, s[color])}>
    {children}
  </button>
}

[DonHuskini]

Thanks for the explanation @charkour. It seems a complex problem.
The proposed solution doesn't seem to work just to let you know.

[charkour]

Sorry, I spoke too soon. Because you are using CSS modules, those will always take precedence because of the cascading rules of CSS and the point in the build process Tailwind generates its style sheet. An alternative is to inline everything from Button.module.css (as to avoid creating classnames that cannot be compared) or to create global classes and include the in the appropriate Tailwind @layer. Hope this helps!

[DonHuskini]

@charkour Thanks for the help. I think it's better to avoid the problem and use an object instead. Like this:

const classes = {
  colors: {
    red: /*tw:*/ `bg-red-500`,
    blue: /*tw:*/ `bg-blue-500`,
  }
};

() => <button className={twMerge(classes.colors[color], className)}></button>

{    
  "tailwindCSS.experimental.classRegex": [
    "\\/\\*\\s?tw:\\s?\\*\\/\\s?`(.*)`"        
  ]
}

[dcastil]

Yeah I also recommend avoiding @apply when using tailwind-merge (#122 (comment)). I should write about this in the docs (issue here).

[dcastil]

tailwind-merge only merges the default Tailwind classes by default. If you define new classes that you want to add to the merging behavior, you'll need to add them to the tailwind-merge config (read here about creating a custom tailwind-merge config).

Adding a bunch of custom classes which use @apply will be a lot of work though and I don't recommend doing it. Instead, I recommend not to use @apply at all when you use tailwind-merge. Instead, store the collection of Tailwind classes in a variable, e.g. in your case with the Button I'd do it like this:

const Button = ({ color, children, className }) => {
  <button className={twMerge(COLOR_CLASSNAMES[color], className)}>
    {children}
  </button>
}

const COLOR_CLASSNAMES = {
  blue: 'bg-blue-500',
  red: 'bg-red-500',
}

[charkour]

Thanks, much more elegant than my solution to inline classes.

[DonHuskini]

Just to leave it here, this is a conversion from my CSS @apply to object.

import React from 'react';
import { cnMerge } from 'utils/cn-merge';
import Spinner from 'components/spinner';

type ButtonProps = {
  children: React.ReactNode;
  fullWidth?: boolean;
  loading?: boolean;
  variant?: 'filled' | 'outlined';
  color?: 'primary' | 'secondary';
  size?: 'base' | 'lg';
} & React.ComponentProps<'button'>;

const s = {
  root: /*tw:*/ `inline-flex items-center justify-center rounded-full font-semibold duration-150 disabled:pointer-events-none disabled:opacity-75`,
  fullWidth: /*tw:*/ `w-full`,
  variants: {
    'filled.primary': /*tw:*/ `bg-[#FAA806] text-[#FFFFFF] hover:bg-[#EE9F04]`,
    'filled.secondary': /*tw:*/ `bg-[#373E4B] text-[#97A3B7] hover:bg-[#343A47]`,
    'outlined.primary': /*tw:*/ `border-[#FAA806] text-[#FAA806]`,
    'outlined.secondary': /*tw:*/ `border-[#373E4B] text-[#373E4B]`,
  },
  sizes: {
    base: /*tw:*/ `px-8 py-3`,
    lg: /*tw:*/ `px-12 py-5`,
  },
  spinner: {
    primary: /*tw:*/ `fill-[#bc7e03] text-white`,
    secondary: /*tw:*/ `fill-[#292e38] text-white`,
  },
};

const Button = React.forwardRef<any, ButtonProps>(
  (
    {
      children,
      variant = 'filled',
      color = 'primary',
      size = 'base',
      fullWidth,
      loading,
      disabled,
      className,
      ...props
    },
    forwardedRef
  ) => {
    const classes = cnMerge(
      s.root,
      s.variants[`${variant}.${color}`],
      s.sizes[size],
      { [s.fullWidth]: fullWidth },
      className
    );

    return (
      <button
        ref={forwardedRef}
        className={classes}
        disabled={disabled || loading}
        {...props}
      >
        {children}
        {loading && (
          <span className="ml-1.5">
            <Spinner className={s.spinner[color]} />
          </span>
        )}
      </button>
    );
  }
);

Button.displayName = 'Button';
export default Button;