Styling

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.

Installation

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

tailwind.config.js

The following options are available:

Usage

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 Variants

Playback

Variant	Description
`media-autoplay-error`	Autoplay has failed to start.
`media-autoplay`	Autoplay has successfully started.
`media-buffering`	Not ready for playback or waiting for more data.
`media-can-fullscreen`	Fullscreen is available.
`media-can-load`	Media can begin loading.
`media-can-load-poster`	Poster can begin loading.
`media-can-pip`	Picture-in-Picture is available.
`media-can-play`	Media is ready to be played.
`media-can-seek`	Whether seeking is permitted for live stream.
`media-captions`	Caption or subtitle text track is showing.
`media-controls`	Controls are visible.
`media-ios-controls`	Native iOS controls are visible.
`media-ended`	Playback has reached the end.
`media-error`	Issue with media loading/playback.
`media-fullscreen`	Media is in fullscreen mode.
`media-live-edge`	Current time is at the live edge.
`media-live`	Media is a live stream.
`media-loop`	Media is set to loop back to start on end.
`media-muted`	Media is muted.
`media-paused`	Playback is in a paused state.
`media-pip`	Media is in picture-in-picture mode.
`media-playing`	Playback has started or resumed.
`media-playsinline`	Media should play inline by default (iOS Safari).
`media-preview`	Time slider preview is visible.
`media-seeking`	Media or user is seeking to new playback position.
`media-started`	Media playback has started.
`media-waiting`	Media is waiting for more data (i.e., buffering).

View Type

Variant	Description
`media-audio`	Whether media type is of audio.
`media-video`	Whether media type is of video.
`media-view-audio`	Whether view type is of audio.
`media-view-video`	Whether view type is of video.

Stream Type

Variant	Description
`media-stream-unknown`	Whether stream type is unknown.
`media-stream-demand`	Whether stream type is on-demand.
`media-stream-live`	Whether stream type is live.
`media-stream-dvr`	Whether stream type is live DVR.
`media-stream-ll`	Whether stream type is low-latency live.
`media-stream-ll-dvr`	Whether stream type is low-latency live DVR.

Remote Playback

Variant	Description
`media-can-air`	Whether AirPlay is available.
`media-air`	Whether AirPlay has connected.
`media-air-connecting`	Whether AirPlay is connecting.
`media-air-disconnected`	Whether AirPlay has disconnected.
`media-can-cast`	Whether Google Cast is available.
`media-cast`	Whether Google Cast has connected.
`media-cast-connecting`	Whether Google Cast is connecting.
`media-cast-disconnected`	Whether Google Cast has disconnected.
`media-remote-connected`	Whether remote playback has connected.
`media-remote-connecting`	Whether remote playback is connecting.
`media-remote-disconnected`	Whether remote playback has disconnected.

Not Variants

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

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.

INFO

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

Focus

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

Hocus

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: