There's a new kid on the block. Feliz.DaisyUI is a library that provides a Feliz-style wrapper over daisyUI, which can be used as an alternative to Feliz.Bulma (the SAFE template default) for defining Fable views. But what is daisyUI and why might you want to use it instead of Bulma? To answer that question, it helps to understand a bit about Tailwind CSS, which daisyUI is built on top of.
Tailwind CSS
Tailwind CSS is
A utility-first CSS framework packed with classes like
flex,pt-4,text-centerandrotate-90that can be composed to build any design, directly in your markup.
Created by Adam Wathan, it provides CSS classes whose names describe the effect they will have. This is notably different to a lot of CSS frameworks (including Bulma), which instead focus on semantic CSS where class names correspond to UI components. This makes Tailwind CSS classes smaller and more focused, which in turn makes them more reusable and composable. For some insight into why this approach is worth trying, it's worth checking out Adam's article on why he moved away from the semantic approach.
Tailwind CSS's homepage is full of rave reviews from developers, so we thought we'd give it a try. We really enjoyed experimenting with it and thought it was worth exploring further - this brought us to daisyUI.
daisyUI
Tailwind CSS only provides utility classes; those classes can be used to build components but, if you use only Tailwind CSS, you have to build them from scratch yourself.
daisyUI is a free-to-use open-source component library made by Pouya Saadeghi, built on top of Tailwind CSS. It provides component classes, which bundle up multiple Tailwind CSS utility classes, that you can apply to components. Importantly though, you can use additional Tailwind CSS utility classes to customise daisyUI components. This means you keep the benefits from Tailwind CSS but can build your UIs more quickly.
As an added bonus, daisyUI comes with loads of themes too!
Feliz.DaisyUI
If you're excited to start using daisyUI in your SAFE projects, Roman Provaznik has got you covered! He and Peter Rosconi have put together Feliz.DaisyUI, which gives you Feliz-style bindings for daisyUI components that you can use in your F# code.
For example, you may want to generate an HTML button with some daisyUI classes:
<button class="btn btn-outline btn-primary">Primary</button> The corresponding F# code is
Daisy.button.button [
button.outline
button.primary
prop.text "Primary"
]Customisation using a utility class is simple:
Daisy.button.button [
+ prop.className "w-full"
button.outline
button.primary
prop.text "Primary"
]At Compositional IT, we're excited to use Feliz.DaisyUI and we hope you are too! Thanks to Roman and Peter for bringing the awesomeness of daisyUI and the composability of Tailwind CSS into the F# ecosystem 🚀
