Looking for the old docs? Go here


Tailwind CSS

A guide on installing and using the Tailwind CSS plugin.

If you’re a fan of Tailwind CSS like we are, then you really don’t want to be forced to create a .css file to handle random outlier cases. It not only slows you down and breaks your flow, but it also goes against all the advantages of using utility classes. Our Tailwind plugin provides you with media variants such as media-paused:opacity-0 to help you easily style elements based on media state.

You can register the plugin by adding the following to tailwind.config.js:


The following options are available:


The Tailwind plugin provides media variants which can be used to prefix utilities so they’re applied when a given media state is active (or not). Here are some examples:

media-autoplay-errorAutoplay has failed to start.
media-autoplayAutoplay has successfully started.
media-bufferingNot ready for playback or waiting for more data.
media-can-fullscreenFullscreen is available.
media-can-loadMedia can begin loading.
media-can-load-posterPoster can begin loading.
media-can-pipPicture-in-Picture is available.
media-can-playMedia is ready to be played.
media-can-seekWhether seeking is permitted for live stream.
media-captionsCaption or subtitle text track is showing.
media-controlsControls are visible.
media-ios-controlsNative iOS controls are visible.
media-endedPlayback has reached the end.
media-errorIssue with media loading/playback.
media-fullscreenMedia is in fullscreen mode.
media-live-edgeCurrent time is at the live edge.
media-liveMedia is a live stream.
media-loopMedia is set to loop back to start on end.
media-mutedMedia is muted.
media-pausedPlayback is in a paused state.
media-pipMedia is in picture-in-picture mode.
media-playingPlayback has started or resumed.
media-playsinlineMedia should play inline by default (iOS Safari).
media-previewTime slider preview is visible.
media-seekingMedia or user is seeking to new playback position.
media-startedMedia playback has started.
media-waitingMedia is waiting for more data (i.e., buffering).
media-audioWhether media type is of audio.
media-videoWhether media type is of video.
media-view-audioWhether view type is of audio.
media-view-videoWhether view type is of video.
media-stream-unknownWhether stream type is unknown.
media-stream-demandWhether stream type is on-demand.
media-stream-liveWhether stream type is live.
media-stream-dvrWhether stream type is live DVR.
media-stream-llWhether stream type is low-latency live.
media-stream-ll-dvrWhether stream type is low-latency live DVR.
media-can-airWhether AirPlay is available.
media-airWhether AirPlay has connected.
media-air-connectingWhether AirPlay is connecting.
media-air-disconnectedWhether AirPlay has disconnected.
media-can-castWhether Google Cast is available.
media-castWhether Google Cast has connected.
media-cast-connectingWhether Google Cast is connecting.
media-cast-disconnectedWhether Google Cast has disconnected.
media-remote-connectedWhether remote playback has connected.
media-remote-connectingWhether remote playback is connecting.
media-remote-disconnectedWhether remote playback has disconnected.

All media variants can be prefixed with not- to negate the selector. Classes with this prefix will be transformed into media-player:not([state]) selectors.


Few more examples:

  • not-media-paused: Media is in the play state (not paused).
  • not-media-playing: Media playback is not active (not playing).
  • not-media-can-play: Media is not ready for playback (not can play).

Data attributes are applied to components throughout the library to expose internal state for styling purposes. Tailwind supports data attributes out of the box to apply styles conditionally.


All component API references include the exposed data attributes. See the player data attributes as an example.

The data-focus attribute is applied to all components when focused via keyboard. This attribute can be used to apply focus styling like so:


The data-hocus attribute is applied to components when they’re being keyboard focused or hovered on by a pointer device. This attribute is applied to help keep class lists concise and can be used like so: