[Help]: Are the embla, embla__container... classes required to use?

[BasixKOR]

Summary

Just wanted to confirm: Are the embla, embla__container classes used internally? Or is it just used for styling in the documentation?

The current documentation doesn't explain at all about it and I'm confused if I should use them alongside my Tailwind classes or it's safe to omit them.

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

Hi @BasixKOR,

You're right to ask — thanks for pointing that out.

The embla and embla__container class names you see in the documentation are just used for styling the example carousels. They aren’t required by Embla Carousel internally, so you’re totally free to use your own class names, Tailwind utility classes, or even CSS-in-JS—whatever fits your setup best.

That said, there is some minimum HTML structure and CSS required for the carousel to function properly. You can find that here in the documentation:

• HTML
• CSS

As long as you apply those structural styles (however you choose to do it), Embla will work just fine.

Hope that clears it up.

[BasixKOR]

Thanks! As the current documentation doesn't point out this and all of the examples use the embla__ classes as of today I think it's an easy to get misconception.

Would you be open to a documentation PR that clears up this fact?

[davidjerleke]

@BasixKOR Sure! Please consider to add the missing information to all variants under Get started — including Module, React, Vue, etc. Thanks!