daisy-typed: an optional, typesafe way to author code that uses DaisyUI

[RobertPakko]

Hello DaisyUI community,

I created a set of utility functions that allow you to author DaisyUI in a typesafe way. It's available on npm and you can try it using npm i typed-daisy. It's inspired by and compatible with tailwindest which provides typesafety for vanilla tailwind.

**NOTE: It does not yet support all components, colors, and themes; but I figured I'd post it as-is so that if people had suggestions for changes it would be easier to incorporate them. I also want to make sure that something similar doesn't already exist as if it does then this wouldn't really be worth completing.

The package consists of three functions:

• daisy allows you to generate the class name for a daisy component like so:
  <div class={daisy("btn")(["primary", "large", "square"])}/> evaluates to <div class="btn btn-primary btn-lg btn-square"/>
  It ensures that intellisense only allows you to specify components which exist and modifiers which match the given component. It also allows you to browse through the available components and modifiers from directly within your text editor.
• daisyColor allows you to use colors from the Daisy color palette like so:
  <div class={daisyColor({bgColor: "base-100", textColor: "base-content"})}/> evaluates to <div class="bg-base-100 text-base-content"/>
• daisyTheme generates the property needed to set the theme on a tag
  <div {...daisyTheme("cupcake")}/> evaluates to <div data-theme="cupcake"/>

You can easily combine these together to make typesafe utility classes incorporating elements of daisy components, themes, colors, and vanilla tailwind:
<div {...daisyTheme("cupcake")} class={daisy("card")() + daisyColor({bgColor: "base-100"}) + wind({boxShadow: "shadow-xl"}).class()}>
{/* content */}
</div>

Anyways, looking forward to seeing if this is something that people would find useful!

The code is available on Github, and an example component is shown in this file on the repo.

My next steps are likely finishing support for all classes, colors, and themes as well as completing a small website to serve as both documentation and an example for using these functions.

[cqh963852]

For more typed classname. You can check https://github.com/muhammadsammy/tailwindcss-classnames

---

But I don't want use that , It make typescript language server run slow... 😥

[RobertPakko]

Thank you for sharing, this looks interesting. It looks like they recently did an overhaul that increased performance significantly, so it might be worth a second look.

[maxcan]

unfortunately that overhaul ruined the ergonomics of the library. Those utility classes are exceptionally verbose and make it pretty difficult to use (keep having to look up which utility class to use)

[cqh963852]

May be vanilla-extract is suitable.