Core Concepts
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.
VSCode
You will need to add the following VSCode setting to ensure Tailwind intellisense works with custom classes on components:
Installation
You can register the plugin by adding the following to tailwind.config.js
:
Options
The plugin accepts options for configuring prefixes on variants provided by Vidstack:
Usage
The <media-player>
element exposes media state as HTML data attributes vars like so:
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
Variant | Description |
---|---|
autoplay-error | Autoplay has failed to start. |
autoplay | Autoplay has successfully started. |
buffering | Media is not ready for playback or waiting for more data. |
can-control | Media is ready for playback and user is not idle. |
can-fullscreen | Media fullscreen is available. |
can-load | Media can begin loading. |
can-pip | Picture-in-Picture is available. |
can-play | Media is ready to be played. |
can-seek | Whether seeking is permitted for live stream. |
captions | Caption or subtitle text track is showing. |
ended | Playback has reached the end. |
error | Issue with media loading/playback. |
fullscreen | Media is in fullscreen mode. |
live-edge | Current time is at the live edge. |
live | Media is a live stream. |
loop | Media is set to loop back to start on end. |
muted | Media is muted. |
paused | Playback is in a paused state. |
pip | Media is in picture-in-picture mode. |
playing | Playback has started or resumed. |
playsinline | Media should play inline by default (iOS Safari). |
seeking | Media or user is seeking to new playback position. |
started | Media playback has started. |
user-idle | User is not active during playback. |
waiting | Media is waiting for more data (i.e., buffering). |
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 examples:
not-paused
: Media is in the play state (not paused).not-playing
: Media playback is not active (not playing).not-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 like so:
👉 See the "Styling" and "Tailwind" sections for each component to see what data attributes are available for styling.
Focus
The focus-visible
pseudo-class and Tailwind variant does not work with custom elements in Safari. To remedy this, a data-focus
attribute is applied to components when focused via keyboard. This attribute can be used to apply focus styling in Tailwind 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: