TIL how to style progress bars with Tailwind CSS

The HTML <progress> element requires browser-specific pseudo-elements for styling. Tailwind’s arbitrary selector syntax makes this straightforward:

<progress
  class="[&::-webkit-progress-bar]:bg-slate-300 [&::-webkit-progress-value]:bg-violet-400 [&::-moz-progress-bar]:bg-violet-400"
  value="60"
  max="100"
/>

The relevant pseudo-elements are:

• ::-webkit-progress-bar — the track (Chrome/Safari)
• ::-webkit-progress-value — the filled portion (Chrome/Safari)
• ::-moz-progress-bar — the filled portion (Firefox)

For reuse, you can also register custom variants via a plugin:

plugin(function ({ addVariant }) {
  addVariant("progress-unfilled", ["&::-webkit-progress-bar", "&"]);
  addVariant("progress-filled", [
    "&::-webkit-progress-value",
    "&::-moz-progress-bar",
  ]);
});

Which lets you write cleaner markup:

<progress class="progress-unfilled:bg-slate-300 progress-filled:bg-violet-400" value="60" max="100" />