saadeghi/daisyui

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;