Config for tailwind-css-icons plugin

[blowsie]

Reading the docs, im not sure how to configure tailwind merge to remove extra icon class names from
https://github.com/egoist/tailwindcss-icons

eg

twMerge(`i-carbon-upload i-carbon-download`)

expected i-carbon-download

I took a look through the documentation butt wasnt obvious to me how I can allow only one icon. Is anyone able to tell me if its possible and provide guidance on how to do so?

[dcastil]

Hey @blowsie! 👋

You can configure tailwind-merge with a new class group with all those icons in it (more here in the docs) so that tailwind-merge knows to override those classes.

import { extendTailwindMerge, validators } from 'tailwind-merge'

const twMerge = extendTailwindMerge({
    extend: {
        classGroups: {
            // We're adding a new group called `icon`.
            // All classes starting with `i-carbon-` will go into this group.
            icon: [{ 'i-carbon': [validators.isAny] }]
        },
    },
})

In case you want to resolve conflicts between the icon classes and other Tailwind classes, you also need to configure conflictingClassGroups. More on that in https://github.com/dcastil/tailwind-merge/blob/v2.3.0/docs/configuration.md#conflicting-class-groups.