My Nuxt3 project doesn't seem to purge unused DaisyUI classes as it should - using recommended config as per docs

[Chippd]

Stackblitz doesn't show you built files, so I've recreated the problem in a Github repo.

It appears as thoughunused classes are not being removed from the compiled CSS as they should be.

We're following the instructions on the DaisyUI install page and have consulted the example Nuxt project on the Stackblitz page.

When we run the commands for this project:

npx nuxi build
npx nuxi preview

We see that the index page that is generated is quite heavy (43kb) for the content that is on it.

When we investigate the response...

We see that there are classes included in the page that are not used. Not only are they not used on this page, but they're not used on any of the pages in the project.

'textarea' as a class not used anywhere in this project, for example.

In summary

This may well be a misunderstanding on my part in that I need to do something specific to purge unused classes from my build files, and if that's the case, I'll happily submit a pull request to add that to the documentation, as I believe it's important for others to know.

Thank you

[saadeghi]

These are not from daisyUI.
daisyUI styles .textarea class name not the textarea element itself.
These styles are the default reset styles of Tailwind CSS called "preflight" and is included in all Tailwind projects by default:
https://tailwindcss.com/docs/preflight

Here are all of them: https://unpkg.com/[email protected]/src/css/preflight.css

You can disable it from Tailwind: https://tailwindcss.com/docs/preflight#disabling-preflight

But I would not recommend removing it, because without this reset file, all elements will use the default browser styles (which sometimes are different for each browser) and you will experience some unexpected UI issues in different browsers.

The whole size of this reset file is so small that removing it wouldn't make change.

Let me know if you have a question.

[Chippd]

Ugh I knew it was something stupid I was missing. Thank you for the reply.

[Chippd]

Sorry @saadeghi I actually DO still have a problem, the examples I used initially were incorrect.

You can see classes in the page like tabs-lifted which I don't use anywhere in the project and are specifically DaisyUI.

Do you have any insight as to why this is happening? Banging my head against a wall with this for two days.

[saadeghi]

Thanks for the update!

I think the CSS processor is including .mockup-browser .mockup-browser-toolbar .input beause it found input string in your files. Same with .tabs-lifted>.tab because the word tab is in your files.

@nuxtjs/tailwindcss which you're using adds these paths to tailwind config by default:
https://tailwindcss.nuxtjs.org/tailwind/config

If you don't want it to scan the strings from all these files, you can manually address your view files and component files for content

daisyUI is not doing the search and generation of class names so I can't help with how it's currently working. daisyUI only introduces new class names to Tailwind.

Basically this is how it works: Tailwind scans all the paths specified in content in tailwind.config.js if it finds the string flex anywhere in the files, it adds all the selectors with the word flex in it.

So even if you have the word flex in a paragraph, flex class will be in your CSS.

This is a safe way to make sure Tailwind is not missing any styles be default.
To gain more control and to make sure each class name only exists in the CSS if you used it, you can use a prefix for Tailwind CSS class names (or a prefix for daisyUI class names)

This way, your class name would be tw-tab for example, and there's a lower chance a class name would randomly be in the CSS just because a tab word was in the source code.

Additionally you can manually prevent specific classes to be included using Tailwind blocklist:
https://tailwindcss.com/docs/content-configuration#discarding-classes

But if you want my opinion, don't worry about the specific class names. Yes, your HTML file is now ~40kB but on the CDN it will be compressed more than 5x smaller. Additionally, I think you can config Nuxt in a way that it doesn't put your CSS file inside the HTML. Because if you serve the style in a .css file, it will be cached and compressed even better.

Let me know if you have a question.

[saadeghi]

daisyUI 5 is in development. There's going to be an option to include/exclude specific parts of the library to completely prevent such issues: https://daisyui.com/blog/daisyui-5-alpha/

[Chippd]

well, I just learned something new.
I'll try the prefix trick and see if that solves it. I'm just on a bit of a crusade re performance and this was annoying me - especially when I thought the entirety of tailwind or Daisy was being included unnecessarily on the page. I see now that's not the case.

Thank you again or taking the time to explain things, and quickly too, I appreciate it.

Love the project btw, I recommend it to anyone I can.