Custom classes

[gitmalong]

Hi!

I am using Tailwind with DaisyUI so I'd like to add custom classes to my components such as https://leptonic.dev/doc/select .

<select class="select select-bordered w-full max-w-xs join-item">
    <option>
        EUR
    </option>
    <option>
        USD
    </option>
</select>

Is it possible to run this lib headless and providing functionality to add such custom classes?

[lpotthast]

Hey, Leptonic renders custom markup instead of <select> and <option> as many other framework-specific component libraries do. DaisyUI won't do that, because it is just a simple CSS framework with no logic attached. Our Select component does a lot more than a default HTML5 select input.

I added a class prop to all three select variants (Select, OptionalSelect and Multiselect). Thank you for bringing this up, as this prop exists on most other component but was missing here!
The classes specified through this prop get attached to the <leptonic-select> element. You can always add custom CSS styling to alter the look and feel of this element and its children (in particular the <leptonic-select-option> element.) A few things can also be configured by simply overwriting the CSS variables defined at the end of this page https://leptonic.dev/doc/select.

I think you may have to reconsider what you want to achieve. You can either use DaisyUIs select or Leptonics select component. You cannot combine them. You can try to alter the style of Leptonics select component with Tailwind. Through the new possibility of attaching a custom class, it should be easier to attach custom styles to a particular select on your site.

[lpotthast]

All components allow custom classes. When a component renders a more complex html hierarchy, these classes are typically attached to the root element of that hierarchy. With the upcoming changes to Leptonic, you will also be able to create your own components using hooks, which provide interaction logic, handle accessibility concerns and more. This way, fully custom styled components are possible.