auto replace duplicate class for same property

[ASunKollide]

Here is the user case :
in react we need pass className to override component style, For example:

const TextComp = (props)=>{
        return <span className={`w-auto ${props.className?props.className:""}`}>text sting</>
 }

const ParentComp = ()=>{
       return <div><TextComp className="w-full"  /></div>
}

// <div><span class="w-auto w-full"  /></span></div>

when render ParentComp, the TextComp class will be "w-auto w-full",

most of time "w-auto" will be override by "w-full" , but for other class in this kind of case may not be override due to the order of class in css stylesheet.

So i think is better to remove duplicate class for same property, only keep the last one when tailwind compile the css file.

or provide a helper function to make custom to merger two className string:

   const classNamePre = "w-full h-64 text-xl"
   const classNameNew="w-auto h-screen"
   const className = merge(classNamePre,classNameNew)
  // className should be "w-auto h-screen text-xl"

not really sure this will be a solution or there are other solutions i can use.

Thanks for provide tailwind as such great tool.

[mariusmarais]

@ASunKollide I'm dealing with this same issue in React and published an experimental package yesterday to handle these overrides if you want to check it out: https://github.com/mariusmarais/tailwind-cascade

Any feedback would be appreciated.

[ASunKollide]

thank you so much, this exactly what i want.

[joseDaKing]

If tailwindcss is a strict atomic CSS framework which means each CSS class uses one property, then it easy to override conflicting classNames. What needs to be done is to extract CSS classes and their properties and save them as KeyValuePair object where the Key is CSS class and value is the property type. With this CSS metadata, the following code will be able to override tailwindcss classNames

type ClassName = string;

type Property = string;

type MetadataClassNames = Record<ClassName, Property>;

// CSS metadata
const metadataClassNames: MetadataClassNames = {
    "bg-red-100": "background-color",
    "bg-green-200": "background-color",
    "text-blue-100": "color",
    "text-red-200": "color"
}



type OveridedClassNames = Record<Property, ClassName>;

const createOverideClassNames = (metadataClassNames: MetadataClassNames) => {

    const overideClassNames = (className: string) => {
       
        const classNameParts = className.split(/\s+/);

        // Used for saving the current overided className
        const overidedClassNames: OveridedClassNames = {};

        // Used for saving all classNames not found in the metadtaClassNames so it can be restored later
        const noneMetadataClassNames: string[] = [];

        classNameParts.forEach(className => {

            // Check the property of the className
            const property = metadataClassNames[className];

            
            // If undefiend than the className is not defiend metadataClassName
            if (property) {

                // Save the current overided className based on property
                overidedClassNames[property] = className;
            }
            else {

                // Save all classes not found in metadataClassNames                 
                noneMetadataClassNames.push(className);
            }
        });

        return [
            ...noneMetadataClassNames,
            ...Object.values(overidedClassNames)
        ]
        .join(" ");
    }

    return overideClassNames;
}

const overideClassNames = createOverideClassNames(metadataClassNames);

const result = overideClassNames("bg-green-200 abra bg-red-100 text-blue-100 ibra text-red-200");

console.log(result);

[mariusmarais]

Yes, that's exactly what https://github.com/mariusmarais/tailwind-cascade does.

However, compiling the list isn't really a static thing, because even without Tailwind versions, customising anything via the config will result in different classes, and sometimes entirely new classnames. And Tailwind isn't strict across all the utilities.

Which is why we want this to have first-party support. It's only easy if you haven't tried using it.

[joseDaKing]

By static, I mean the tailwind CSS code will not change during runtime. The list/metadata should be generated each time a new tailwind CSS file is generated and it should include CSS classes that are atomic (that include one property). I think that the best we can do if it is not enforced by tailwind.

[ala-garbaa-pro]

This repository provides a TypeScript function called tcpr (Tailwind CSS Prefix Remover) that helps remove duplicated prefixes from class names and ensures that only one class with a specific prefix is included in the final output.:
https://github.com/ala-garbaa-pro/tailwind-css-prefix-remover