feat: replace classnames by tailwind-merge

[tulup-conner]

Description

In general, you shouldn't need to use !important to customize the theme of any component anymore, and you can safely remove its usage anywhere in your Flowbite React themes/custom classNames.

Users normally get confused about the need to use ! to overwrite the theme classes when using className= property. This PR includes tailwind-merge that handles the conflicts instead of using classNames.

Example:

<Badge className="bg-red-500">A badge with custom background</Badge>

What this PR does:

<span class="flex h-fit items-center gap-1 font-semibold text-cyan-800 dark:bg-cyan-200 dark:text-cyan-800 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300 rounded p-1 text-xs bg-cyan-500" data-testid="flowbite-badge"><span>Default</span></span>

Current state:

<span class="flex h-fit items-center gap-1 font-semibold bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-800 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300 rounded p-1 text-xs bg-red-500" data-testid="flowbite-badge"><span>Default</span></span>

Type of change

• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change contains documentation update

Breaking changes

• <Avatar img="somewhere.jpg" theme={..} /> now has a avatar.root.img.base style to customize the output of the <img/>. If you were customizing <Avatar> theme with any of avatar.root.img, you might want to check out the changelog: 427a56f (we just moved a rounded from on/off to base)

How Has This Been Tested?

• Visual inspection of yarn dev
• Visual inspection of Vercel deployment

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• New and existing unit tests pass locally with my changes
• I have checked my code and corrected any misspellings

This is a continuation of #800

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
flowbite-react	✅ Ready (Inspect)	Visit Preview	Jun 20, 2023 11:06pm