Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Modal styling and animation missing #3026

Closed
mike-tuxedo opened this issue May 9, 2024 · 3 comments
Closed

docs: Modal styling and animation missing #3026

mike-tuxedo opened this issue May 9, 2024 · 3 comments

Comments

@mike-tuxedo
Copy link

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

Copy link

github-actions bot commented May 9, 2024

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
Copy link
Owner

saadeghi commented May 9, 2024

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.

@saadeghi saadeghi closed this as completed May 9, 2024
@mike-tuxedo
Copy link
Author

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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants