Support DaisyUI plugin

[drosi94]

Hello!

I am trying to use the DaisyUI tailwind plugin to a next.js PWA that I am building using twin.macro. The problem is that it takes very long to build when I am using the Daisy UI plugin in the tailwind.config.

I am trying to find a workaround to that. But i think it would be nice to support this plugin with the twin.macro

[ben-rogerson]

Hey there

I've heard a few requests like this recently.
Having not looked into the current support yet, could you let me know what's currently working/not working with the integration?

[drosi94]

I will provide my repository with setup instructions until tomorrow to check yourself.

Everything seems to work pretty nice with the DaisyUI plugin (autocompletion, the utility/components classes are working as expected) but it takes really long time to build the application

[drosi94]

Github repo

(use the feature/CU-1k4vbcm_Create-the-Profile-creation-modal-page branch)

(You need lerna and yarn as it's a monorepo)

After installing the dependencies with

yarn install

Run the storybook (packages/ui)

yarn start:ui

In the root folder, you can find the tailwind.config.js file, and in the packages/ui/tailwind.config.js the storybook's one that extends the root.

In line 66 if you remove require('daisyui') the build of the storybook will be much faster. The same happens if you try to build the next.js PWA with yarn start:pwa.

Also as a side note, the build takes really long only the first time, if you try to build it again is much faster, I guess because of some internal caching.

[ben-rogerson]

@ShravanSunder could you explain a little more what you mean and the circumstances in which it happens?

[ShravanSunder]

setup
@ben-rogerson if twin.macro is added to a project:

• using babel-marco and babel-twin (i think the package's name) to babel config
• and then daisy is added to the tailwind config

outcome:
daisy continuously goes into a loop re compiling

• if twin is removed from babel, it works
• if daisy is removed there is no loop of recompiling

My basic setup was docusaurs typescript tempalte and adding tailwind, daisy and twin to it

[ShravanSunder]

@ben-rogerson do you need any other info? i can point you to the repo as well (its open source)

[ben-rogerson]

I'm in the middle of some large projects at the moment and supporting daisyUI is low on the priority list.
But if you'd like to provide a PR or dig in to help narrow down the issue then it could help speed this along ❤️

[NetLancer]

Just to share an excitement, i think: twin+daisyUI plugin would do a magic i've been looking for (but didn't figure what combination of tools would lead to that). In my estimation it helps a lot to have a clean & semantic markup especially when working fullstack and need to focus a little more on data part, escape the need to read through messy multi-classnames and likes and have ease & clarity. Cheers :)

[ben-rogerson]

Hey folks, some good news - daisyui will work with the next version of twin (rc-2) 👍

[rostgoat]

testing card from daisyui on 3.0.0-rc.5 but getting card was not found. same issue on 3.1.0. Is there a trick to configuring this @ben-rogerson ?

[ben-rogerson]

@rostgoat I tested the card component in a stackblitz example here. All I did was required daisyui in the tailwind.config and restarted the dev server. If using next, sometimes you may need to remove the .next folder to defeat caching.

[rostgoat]

ah yes you are right, it does work! my case was a bit different as I am using tailwind inside an NX React monorepo so I have to generate a tailwind.config inside each app or library, which is a bit of a pain. But as long as I require daisy in each tailwind.config file then it does work for me when I use tw.div as a styled component, thanks @ben-rogerson !

[ben-rogerson]

If you don't set a config path in your twin config then Twin will ascend directories to find the nearest tailwind config so you shouldn't need one in each project folder.

[souzjfe]

@ben-rogerson
I tested your stackbliz exemple and noticed that the button with tw class btn-primary is not being applied.
I also tested with checkbox and the result was the following:

the background color of the checked checkbox should be orange.
code:

<input type="checkbox" tw=" checkbox checkbox-primary" />
<strong tw="text-xl bg-primary">outher tailwind style</strong>

why does this happen?