Problem with Nuxt UI, it looks like some CSS classes don't correctly apply styles
I'm using Nuxt UI for the documentation of my module, Nuxt Social Share, that you can see live here: https://nuxt-social-share.stefanobartoletti.it/
It works fine except for some components, whose layout is broken and that look like some of their Tailwind classes are not correctly applying their style.
I'm not exactly sure about what could be causing this, if I run
pnpm docs:generate && pnpm docs:preview locally, everything seems fine, but building the static site on the deploy platform (in this case Netlify, but I tested it also on Vercel with the same issue), the layout is broken.
Has this already happened to somebody else?
How can this be solved? The source code of the documentation site is open and available here https://github.com/stefanobartoletti/nuxt-social-share/tree/main/docsGitHub
nuxt-social-share/docs at main · stefanobartoletti/nuxt-social-share
Simple social sharing for your Nuxt Sites. Contribute to stefanobartoletti/nuxt-social-share development by creating an account on GitHub.
3 Replies
you might know this, but it might be the margin top
maybe border radius is a problem too 🙂 (looks like it should not have radius top)
Yes, the problem is not identifying the CSS, is that apparently Tailwind is treeshaking too aggressively, also stripping out of the bundle the classes that are actually used.
I have tried to collect some more info, and this seems to be related.
In the build logs on Netlify, I have the following lines during client build:
and they are not present in the local build.
My Tailwind config is not using any "purge" property that should be migrated (I started with the docs template propvided by Nuxt UI), so I'm not sure why this is happening, but it seems to confirm that the problem is related to Tailwind