vidstack / player

UI components and hooks for building video/audio players on the web. Robust, customizable, and accessible. Modern alternative to JW Player and Video.js.
https://vidstack.io
MIT License
1.89k stars 114 forks source link

Tailwind utilities conflict with default layout #1326

Open kevinschweikert opened 4 days ago

kevinschweikert commented 4 days ago

I am using a fresh Elixir Phoenix project with a default Tailwind and Esbuild setup. Esbuild and Tailwind are running as standalone binaries. The styles get correctly imported, but there seems to be an issue/conflict with the tailwind utilities.

Current Behavior:

image

Expected Behavior:

image

Steps To Reproduce:

  1. Import Default Layout styles in app.js like in https://www.vidstack.io/docs/player/getting-started/installation/javascript?provider=hls&styling=default-layout&install=npm
  2. To get the correct styles, remove @tailwind utilities; in app.css

Environment: