Make it more clear how to customize styles

[nextmat]

Summary

First, thank you for the awesome library! I'm enjoying using / exploring it.

The documentation is generally really thorough, but I'm unclear on the best approach for customizing styles if I want to modify beyond the options made available for each component.

In most cases the components provide class props for additional classes, but I find that I run into collisions with the styles already defined by the component.

For example if I want a custom color for the Navigation component I might do something like:

<Navbar let:hidden let:toggle navClass="bg-[#585A65]">

This will be rendered as something like:

<nav class="bg-white dark:bg-gray-900 ... bg-[#585A65]">

In some cases the appended styles are respected, but when the component already includes a competing style, the behavior can be variable.

Another example:

<Input id="search-navbar" class="rounded-sm" placeholder="Search..." />

Renders as:

<input id="search-navbar" class="... rounded-lg rounded-sm" placeholder="Search..." type="text">

With the rounded-lg included by the component preventing the customization.

Is there a better way to do this? Part of the appeal of Flowbite to me is easy further customization using the Tailwind classes. If I understand this better I'd consider contributing a documentation section to make this clearer to new users.

Motivation

It would be nice to enhance to documentation so new users of the library can better understand the appropriate steps for customizing the components during use and which steps to take in what order.

[shinokada]

Regarding the color theme, you can update tailwind.config.cjs and use primary. Or add new colors with secondary etc.

For the Input component, please see the props. You can change size, defaultClass, color props etc.

[RyanZhiNie]

<Input id="search-navbar" class="rounded-sm" placeholder="Search..." />

For me, I'll use !rounded-sm to set its precedence over rounded-lg.

BTW, I personally rarely use class props like navClass, these props are somehow confusing, some of them will append declared classes to existing component preset classes, but others will totally overwrite existing component preset classes, so I usually directly use class to append my desired classes.

[nextmat]

Thank you for the prompt response!

Regarding the color theme, you can update tailwind.config.cjs and use primary. Or add new colors with secondary etc.

This makes sense. So for the Navbar component I could customize the navbar color and then use color=navbar since that is one of the options the prop supports?

For the Input component, please see the props. You can change size, defaultClass, color props etc.

For my example with Input, how would I modify border radius with rounded using the props? It doesn't seem to be supported and the rounded-lg class is hardcoded in the component? Is @RyanZhiNie's suggestion of forcing precedence my best option?

[nextmat]

For me, I'll use !rounded-sm to set its precedence over rounded-lg.

BTW, I personally rarely use class props like navClass, these props are somehow confusing, some of them will append declared classes to existing component preset classes, but others will totally overwrite existing component preset classes, so I usually directly use class to append my desired classes.

Thank you, this is very helpful! I agree the behavior is pretty variable, at least based on my experience so far. For some components with more complex HTML structure the class props seem to best way to apply styles to elements that are not otherwise exposed?

[shinokada]

@nextmat Since Flowbite input examples have borders, so we hard-corded it. For now please use ! as Ryan suggested.

[jjagielka]

There's always a trade-off between the usability and flexibility. We can expose lots of parameters to be adjustable, but then the docs would explode with params like sizeClass, colorClass, borderClass, roundingClass, paddingClass, alignmentClass, ...

Flowbite framework proposes certain solutions that work well together - proportion size to padding, or border color to background color pairs, etc. If you like it, please use it, with a certain degree of customization like size or color, and use the class prop to pass the settings for margins, padding, alignment, extra width or height, or alike.

If you opt for more radical changes, you have the option of:

• override some classes with ! modifier (css !important) by passing the class prop (ex. class="!rounding-sm")
• change the defaultClass prop that usually expose the basic layout of components
• re-write of the components - code is open so it's relatively easy to write your own components inspired by the ones proposed by the framework
• look for another framework that fits better your preferred style :(

[nextmat]

@shinokada - That makes sense, thank you for the confirmation.

@jjagielka - Thank you for the thoughtful explanation, very helpful. This is exactly what I was looking for.

Your point regarding making too many things adjustable is well taken. It doesn't make sense to clutter the interface (or code) with rarely used props. It is helpful for me to think about an escalating order of modification - where to start in the process and what the options are to customize further if I really need to.

Appreciate all your help!

[shinokada]

Thank you for your contribution. Please feel free to open a new issue. I close this issue for now.

[v79]

I note that Modal doesn't offer a defaultClass prop to override. I would very much like to have my modal buttons right-aligned and can't find any way to do this.

[shinokada]

To align the Button component, you can use btnClass. Is that what you want?

[jjagielka]

It's enough to add ml-auto to the first button. Look at the default modal example and modify it like:

  ...
  <svelte:fragment slot='footer'>
    <Button class="ml-auto" on:click={() => alert('Handle "success"')}>I accept</Button>
    <Button color="alternative">Decline</Button>
  </svelte:fragment>
</Modal>

[brobee727]

I fully agree with this ticket. I would like to reduce the distance of a table rows, move closer each rows, but have no idea how to do that. Is it possible? Any solution? Thx!