docs: Modal styling and animation missing
mike-tuxedo opened this issue · 3 comments
On which page do you see this issue?
https://daisyui.com/components/modal/?lang=en
Describe the issue
The modal works well on the documentation page, but if I put it in my sveltekit project, it doesn't have styling nor animations.
To fix this I had to add the following configuration to tailwind.config.cjs. Maybe you can add this to the documentation.
purge: {
content: ['./src/**/*.{html,svelte,js,ts}'],
options: {
safelist: ['animate-*'] // Um sicherzustellen, dass Animationsklassen erhalten bleiben
}
},
What browsers are you seeing the problem on?
No response
Thank you @mike-tuxedo
for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I
find a solution.
In the meantime providing more details and reproduction links would be
helpful.
There's no need for safelist
Here's an example repo: https://stackblitz.com/edit/daisyui-sveltekit-ykvp96?file=src%2Froutes%2F%2Bpage.svelte
Let me know if you have a question.
Thanks @saadeghi , then my svelte.config.js may be the rootcause, because I am using sass in my project. I may have to dig more into it, to get the real problem.
For reference, this is my config.
import adapter from '@sveltejs/adapter-node';
import preprocess from 'svelte-preprocess';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter(),
serviceWorker: {
register: false
}
},
preprocess: preprocess({
scss: {
prependData: `@import './src/variables.scss';@import './src/defaultTheme.scss';@import './src/app.scss';`
}
}),
};
export default config;