Getting Started
Styling
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 <vds-media>
element exposes media state as HTML attributes and CSS properties like so:
If we were to write vanilla CSS to show and hide icons inside a play button, it might look something like this:
Using the Tailwind plugin, we could rewrite it like so:
Isn't that so much easier to comprehend? That's basically the plugin in a nutshell, we'll leave the rest to your imagination. In the next sections, you'll find out more about each of the variants and CSS variables available when using our plugin.
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.
Media Example
The following example showcases a track with a fill inside indicating the amount of playback time that has passed. When the media is buffering (indicated by the media-waiting
variant) we change the fill background color.