Add tailwind classes instead of replacing them

[ESchouten]

Summary

Currently, when adding a (Tailwind) CSS class to a Flowbite element, it is necessary to copy all the default classes and append the desired class to the string. This process leads to unnecessary clutter and prevents receiving updates and fixes for Flowbite elements when new versions are released. This feature request aims to streamline the process by providing a more concise and flexible way to add custom CSS classes.

Basic example

The current procedure for adding a custom CSS class to a Flowbite element involves duplicating the default classes and appending the desired class to the existing string. For example:

Default sidebar wrapper: <SidebarWrapper>

Custom sidebar wrapper with h-full class: <SidebarWrapper divClass="overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800 h-full">

This approach results in two main issues:

1. Unnecessary Clutter/Boilerplate: The need to include all default classes even when modifying just one or two CSS classes introduces excessive clutter and increases the size of the codebase.
2. Overwriting Updates and Fixes: When Flowbite elements receive updates and fixes in new versions, any modifications made to the default classes are overwritten, preventing users from benefiting from the improvements.

Proposed Solution

To address these issues, it is suggested to introduce a more streamlined and flexible method for adding custom CSS classes to Flowbite elements. Two possible approaches:

1. <SidebarWrapper divClass="h-full"> With this approach, the user can directly specify the desired CSS class without the need to include the entire string of default classes.
2. <SidebarWrapper divClass="+h-full"> This alternative syntax leverages the use of a symbol (e.g., "+") to indicate that the following class should be added to the existing default classes.

By implementing either of these approaches, users can add their custom CSS classes without duplicating the default classes, reducing clutter and avoiding conflicts with future updates.

[shinokada]

Since most of the components have {...$$restProps}, you just use class="h-full" to add a class or overwrite the class.

[ESchouten]

@shinokada How would that work? E.g. SidebarItem has properties

aClass: 'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700'
activeClass: 'flex items-center p-2 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700'
spanClass: 'ml-3'

How would I add a class to, for example, the activeClass property?

[shinokada]

Try this:

<SidebarWrapper class="h-full">

[shinokada]

I think v0.38 solve this issue. Please read the Customization page.