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:

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

      

# Usage

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

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

      

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

# Media CSS Variables

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