feat(theme): improving component customization using twMerge

[rluders]

Description

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>

Fixes # (issue)

Type of change

• Breaking change (fix or feature that would cause existing functionality to not

Breaking changes

• By removing the classname library and introducing the tailwind-merge it means that theme-per-component will not require to use !important anymore, the same applies to className prop.
• If you are using custom theme, it can cause some small issues, better to test and make sure that everything is working.
• FlowbiteAvatarImageTheme now has a base style.

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

• Unit test
• Manual testing

Test Configuration:

N/A

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
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
flowbite-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 20, 2023 10:29pm

[codecov]

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (759aa76) 99.54% compared to head (be1fc1d) 99.54%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #800   +/-   ##
=======================================
  Coverage   99.54%   99.54%           
=======================================
  Files         129      163   +34     
  Lines        6539     6621   +82     
  Branches      391      401   +10     
=======================================
+ Hits         6509     6591   +82     
  Misses         30       30           

Impacted Files	Coverage Δ
src/components/Accordion/Accordion.tsx	100.00% <100.00%> (ø)
src/components/Accordion/AccordionContent.tsx	100.00% <100.00%> (ø)
src/components/Accordion/AccordionTitle.tsx	100.00% <100.00%> (ø)
src/components/Accordion/theme.ts	100.00% <100.00%> (ø)
src/components/Alert/Alert.tsx	100.00% <100.00%> (ø)
src/components/Alert/theme.ts	100.00% <100.00%> (ø)
src/components/Avatar/Avatar.tsx	100.00% <100.00%> (ø)
src/components/Avatar/AvatarGroup.tsx	100.00% <100.00%> (ø)
src/components/Avatar/AvatarGroupCounter.tsx	100.00% <100.00%> (ø)
src/components/Avatar/theme.ts	100.00% <100.00%> (ø)
... and 103 more

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[tulup-conner]

Could you also do me a favor and replace the classnames usage in app/components/code-preview.tsx and app/docs/layout.tsx to tailwind-merge?

[tulup-conner]

Moved to #816