How to use daisyui using standalone tailwindcss.exe ?

[square-foot]

Pardon for possibly asking a simple question. I am not familiar with Nodejs.

I don't use Nodejs at all. I am using a different site generator which is a simple standalone SSG (see fillpouch.com )

I downloaded the standalone tailwindcss.exe on windows and I created this input.css

@import url("https://cdn.jsdelivr.net/npm/daisyui@4.5.0/dist/full.min.css");
@tailwind base; 
@tailwind components;
@tailwind utilities;

And I gave this command:

tailwindcss-windows-x64.exe -i .\input.css -o e:\daisyUItest\www\styles.css --watch

The above does produces styles.css and the site looks fine. But at the front of style.css it has copied that "@import url("https://cdn.jsdelivr.net/npm/daisyui@4.5.0/dist/full.min.css");" which I think means, the browser will download the entire minimized DaisyUI css (It will later cache it , possibly, on other calls of the HTML) |

My question is: Is there a better way to compress and optimize this?

Thanks in advance!

[saadeghi]

The minified file is compressed, but the challenge is, it includes all the class names, even the ones you don't use.
Shipping unused CSS is not optimal for production.

If you use daisyUI and Tailwind CSS as Node dependencies, it will only export the required class names but with standalone file, it's not possible because Tailwind CSS standalone file only supports first-party plugins, not third party plugins like daisyUI.

So one way would be (hopefully) finding a tool that removes the unused styles in your environment.
Another way would be using Node and using daisyUI as a Tailwind plugin so you only get the required class names and use the output CSS file (made by Node) in your app.

Let me know if you have any questions

[square-foot]

Thank you so much. That was quite helpful.

So does this mean that if I use this import(@....) method I am not really getting any advantage of using tailwindcss.exe build process? Should I anyway resign myself to directly using the daisyui minimized CSS and the js file as suggested on the daisyui website. I know it is not recommended, but if tailwindcss.exe is not really reducing anything, I might as well remove the extra step of generating styles.css

[saadeghi]

if I use this import(@....) method I am not really getting any advantage of using tailwindcss.exe build process?

Only for Tailwind CSS class names, not daisyUI class names. Because the standalone Tailwind file doesn't support third party plugins.

May I ask what is the software your working on and why you can't use Node to build the CSS file?

[square-foot]

Thank you for your reply. I am working on the aforementioned static site generator; FillPouch. I am an old timer (62 years) and I am more comfortable with command line programs and such like. I like terseness -- less no of typing one does, lesser are the chances of getting errors.

I find Nodejs build process quite complex; with too many moving parts and lot of stuff appears in the directories and the build process is quite fragile when one is rapidly iterating. So I gave up on that ... I am sure those who work on Nodejs may not find these reasons to be correct or even valid. To each his/her own, I guess :-) I do code a lot in Javascript -- I especially like pocketbase. It uses its own server side Javascript called "goja" (based on a go library) My main forte is in esoteric languages such as Visual Prolog, Rebol, RED lang, etc. All of them are quite terse. And of course old languages C, C++, Pascal -- those are not terse, but I am good with their build processes

[akclace]

This build of the standalone CLI includes support for DaisyUI without using npm

https://github.com/dobicinaitis/tailwind-cli-extra

[davidalejandroaguilar]

And here's how to compile it yourself if you don't want to blindly trust a release from the repo. tailwindlabs/tailwindcss#12294 (comment)

Kudos to @dobicinaitis for both the tailwind-cli-extra repo and the instructions to compile it yourself.