Need help with my Tailwind modifier custom function

[south-nova]

export const twModifier = (modifier: string, className: string) => {
  return clsx(
    modifier
      .split(' ')
      .map((mod) =>
        className
          .split(' ')
          .map((utility) => `${mod}:${utility}`)
          .join(' '),
      )
      .join(' '),
  );
};

I've created a twModifier function to simplify using Tailwind modifiers.
twModifier('max-md', 'flex-col w-full gap-8 bg-primary')

When used like this, it returns:
'max-md:flex-col max-md:w-full max-md:gap-8 max-md:bg-primary'

It's a simple utility function that returns a string with Tailwind utility classes applied.

However, there's an issue: some styles aren't actually being applied.
In the example above, flex-col and w-full are applied, but gap-8 and bg-primary are not.

How can I resolve this issue? 😢🙏

[wongjn]

In short, this isn't possible. As per the documentation, Tailwind relies on seeing the literal string max-md:bg-primary for it to generate the class name. Tailwind does not run your code, so it does not know the final outcome in the DOM. It only scans your source code as though they were plain text files.

max-md:flex-col max-md:w-full probably work because they exist as literal strings somewhere else in your code. Thus Tailwind generates the class name rules for these. And then these rules apply to your usage here coincidentally because of another file.

[south-nova]

I didn't deeply study how Tailwind actually works, so I thought it would work. Thank you for your answer. 😊