daisy-typed: an optional, typesafe way to author code that uses DaisyUI #1758
RobertPakko
started this conversation in
Show and tell
Replies: 1 comment 3 replies
-
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... 😥 |
Beta Was this translation helpful? Give feedback.
3 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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.
Beta Was this translation helpful? Give feedback.
All reactions