saadeghi / daisyui

๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ โ€ƒThe most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
34.19k stars 1.31k forks source link

docs: Modal styling and animation missing #3026

Closed mike-tuxedo closed 6 months ago

mike-tuxedo commented 6 months ago

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

github-actions[bot] commented 6 months ago

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.

saadeghi commented 6 months ago

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.

mike-tuxedo commented 6 months ago

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;