1. Styling
  2. Tailwind

Styling

Tailwind CSS

In this section, we'll get you up and running with our Tailwind CSS plugin.

Why?

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.

Installation

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

tailwind.config.js 
        module.exports = {
  plugins: [require('vidstack/tailwind.cjs')],
};

Usage

The <vds-media> element exposes media state as HTML attributes and CSS vars like so:

        <vds-media
  paused
  waiting
  seeking
  can-play
  ...
  style="--media-current-time: 500; --media-duration: 1000; ..."
>
  <!-- ... -->
</vds-media>

The tailwind plugin provides media variants which can be used to prefix utilities so they're applied when a given media state is active.

Media Variants

VariantDescription
media-autoplayAutoplay has successfully started.
media-autoplay-errorAutoplay has failed to start.
media-can-loadMedia can begin loading.
media-can-playMedia is ready to be played.
media-can-fullscreenMedia fullscreen is available.
media-endedPlayback has reached the end.
media-errorIssue with media loading/playback.
media-fullscreenMedia is in fullscreen mode.
media-user-idleUser is not active during playback.
media-loopMedia is set to loop back to start on end.
media-mutedMedia is muted.
media-pausedPlayback is in a paused state.
media-playingPlayback has started or resumed.
media-playsinlineMedia should play inline by default (iOS Safari).
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 CSS Variables

You can take advantage of arbitrary values if you're using Tailwind CSS v3+ and use the following CSS media variables.

VariableDescription
--media-buffered-amountThe amount of media that has buffered in seconds (0 -> duration).
--media-current-timeThe current playback time in seconds (0 -> duration).
--media-durationThe total length of media in seconds.
--media-seekable-amountThe amount of media that is seekable in seconds (0 -> duration).
Previous <- Skins
Next Media ->