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
:
Usage
The <media-player>
element exposes media state as HTML attributes and CSS 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 |
---|---|
media-autoplay | Autoplay has successfully started. |
media-autoplay-error | Autoplay has failed to start. |
media-can-load | Media can begin loading. |
media-can-play | Media is ready to be played. |
media-can-fullscreen | Media fullscreen is available. |
media-ended | Playback has reached the end. |
media-error | Issue with media loading/playback. |
media-fullscreen | Media is in fullscreen mode. |
media-user-idle | User is not active during playback. |
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-playing | Playback has started or resumed. |
media-playsinline | Media should play inline by default (iOS Safari). |
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). |
Media CSS Variables
You can take advantage of arbitrary values if you're using Tailwind CSS v3+ and use the following CSS media variables.
Variable | Description |
---|---|
--media-buffered-amount | The amount of media that has buffered in seconds (0 -> duration). |
--media-current-time | The current playback time in seconds (0 -> duration). |
--media-duration | The total length of media in seconds. |
--media-seekable-amount | The amount of media that is seekable in seconds (0 -> duration). |