Closed iandjx closed 1 year ago
DaisyUI works with twin but unfortunately quite a few selectors are written for use in a class="x" attribute
.
Here's part of what's generated with btn
:
tw`btn`
// โ โ โ โ โ โ
({
// ...
"&.loading,&.loading:hover": {
"pointerEvents": "none"
},
"&.loading:before": {
"marginRight": "0.5rem",
"height": "1rem",
"width": "1rem",
"borderRadius": "9999px",
"borderWidth": "2px",
"animation": "spin 2s linear infinite",
"content": "\"\"",
"borderTopColor": "transparent",
"borderLeftColor": "transparent",
"borderBottomColor": "currentColor",
"borderRightColor": "currentColor"
},
"@media (prefers-reduced-motion: reduce)": {
"&.loading:before": {
"animation": "spin 10s linear infinite"
}
},
// ...
});
The loading
class is specified in the selector itself.
A limitation is that twin can only add styles to current element, but not another.
As twin doesn't play a part in class creation, it's unable to apply these types of styles to another element.
So the fix is: We need to additionally add the variants to the className
attribute to add those styles.
I know this isn't great news - best we can do here though.
Thanks @ben-rogerson i think this is fine :)
DaisyUI works but anytime I include more than one DaisyUI classname, the second classname won't work
For example
should display a button with an outline and a loading spinner inside. However, I only see an opaque button which corresponds to
btn
classname only.I have forked the twin.example repo and tested this out inside
next-emotion-typescript
example. Here is the relevant code https://github.com/iandjx/twin.examples/blob/f58899e78ef0a68c7501f270c641d8a10fe937ab/next-emotion-typescript/pages/index.tsx#L15interestingly, I've found a codesandbox wherein it is working properly but on lower version of twin.macro and daisyui https://codesandbox.io/s/twin-macro-daisyui-forked-kjprgg
i tried copying the .babelrc file from the codesandbox project to the twin.example project but to no avail.