Same tailwind classes being duplicated when using tailwind-merge and clsx

[xxFREESHROUDxx]

Describe the bug

In the browser's developer tools, when inspecting elements, multiple instances of the same Tailwind CSS classes (e.g., text-title-1) appear. The first instance is applied, while subsequent instances are striked out and not applied. This duplication occurs for various classes, including pseudo-elements like ::before and ::after and causing the browser to hang.
NOTE: I am using tailwind-merge and clsx on reusable components where i can pass new className but for normal html tags in certain places i use className only but not with tailwind-merge and clsx.

To Reproduce

1. Create a Next.js project.
2. Set up Tailwind CSS and configure it in tailwind.config.ts.
3. Implement a custom utility function using clsx and tailwind-merge as follows:

import { ClassValue, clsx } from "clsx";
import { extendTailwindMerge } from "tailwind-merge";

const customTwMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      "font-size": [
        "text-title-1",
        "text-title-2",
        "text-title-3",
        // Add other custom font sizes...
      ],
    },
  },
});

export const twclsx = (...inputs: ClassValue[]): string => {
  return customTwMerge(clsx(...inputs));
};

4. Use twclsx in multiple components with the same classes:

import React from 'react';
import { twclsx } from '../utils/twclsx';

const ExampleComponent = () => {
  return (
    <div className={twclsx('text-title-1', 'text-body-base')}>
      Example Content
    </div>
  );
};

export default ExampleComponent;

5. Inspect these components in the browser's developer tools and observer the CSS classes.

Expected behavior

A single instance of each unique class should appear in the developer tools, even if the class is used in multiple places in the DOM. For example, text-title-1 should appear once with all its styles applied, without striked-out duplicates.

Environment

• Operating System: Linux
• Browser: Google Chrome
• tailwind-merge version: 2.4.0
• clsx version: 2.0.0
• Tailwind CSS version: 3.3.0
• Next.js version: 14.1.3

Additional context

This issue started after integrating tailwind-merge with clsx. The problem occurs consistently and does not seem to affect the visual output, but it causes clutter and confusion in the developer tools and makes the browser very slow and not responsive.

The multiple instance of same tailwind classes has been applied not twice but multiple times.
This is what looks in the developer tools:

[dcastil]

Hey @xxFREESHROUDxx! 👋

tailwind-merge doesn't remove CSS from your stylesheet, it only controls with classes you'll apply to a certain element like the <div> in your example.

These strike-through classes in the devtools are completely normal and a result of the CSS cascade that Tailwind CSS relies on. The browser is telling you that the container class applies multiple max-width properties that each apply at a different browser width. Currently the top one with the value of 1180px is active, but when you resize the browser to a width of at least 1600px, it will change to 1600px.

[xxFREESHROUDxx]

I understand about the container class but I was just confused why there are multiple *, ::before, ::after {} . I mean when I inspect, I can see these things more than 4-5 times which is making the css longer and sometimes my dev tools inspect section becomes unresponsive. I am currently working in nextjs and have like 4-5 css files (2 of them are module.css files). It would be very helpful if you can help me identify what's causing this issue here.

[dcastil]

I was just confused why there are multiple *, ::before, ::after {} . I mean when I inspect, I can see these things more than 4-5 times which is making the css longer

That's because those properties are inherited, the inspector tells you about every time the property is inherited from parent elements, even though the rule is just present once in the CSS file. You can click on the layout.css?… link to see the content of the CSS file.

I am currently working in nextjs and have like 4-5 css files (2 of them are module.css files).

I think it's better to turn to the NextJS community with that since that isn't an issue with tailwind-merge. They will be far more helpful than me in that area.

[dcastil]

Closing this issue since it isn't related to tailwind-merge.