How to styling <progress> bar ????

[fuxxingbunny]

i try to styling with tailwind but it does't work ?

<progress className="bg-red-600"> 

[jean-francois-labbe]

Here is one good explanation of how to style progress tag.
https://css-tricks.com/html5-progress-element/
It needs to use pseudo elements for each browers to properly be styled.

[pixelsbyeryc]

How do you style them using Tailwind, though? I couldn't find it in the documentation for pseudo-elements (https://tailwindcss.com/docs/hover-focus-and-other-states).

[Emmerseren]

className="[&::-webkit-progress-bar]:rounded-lg [&::-webkit-progress-value]:rounded-lg [&::-webkit-progress-bar]:bg-slate-300 [&::-webkit-progress-value]:bg-violet-400 [&::-moz-progress-bar]:bg-violet-400"

[tnylea]

Honestly, really dig this approach 😊

Thanks @Emmerseren 🤙

[Adebisi01]

Extending it to adjust other properties already . Thanks @Emmerseren

[xitanggg]

Thanks for sharing, very helpful💯

For those who is also looking for progress animation transition, you can add [&::-webkit-progress-value]:transition-all [&::-webkit-progress-value]:duration-500

[travyyx]

Thanks @Emmerseren.

[dumptyd]

Create a plugin!

const plugin = require('tailwindcss/plugin');

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  plugins: [
    // ...

    // adds .progress-bar-[color] and .progress-value-[color] classes
    plugin(function ({ matchUtilities, theme }) {
      const flattenedColors = Object.entries(theme('colors')).reduce((acc, [key, value]) => {
        if (typeof value === 'string') acc[key] = value;
        else {
          Object.entries(value).forEach(([number, color]) => {
            acc[`${key}-${number}`] = color;
          });
        }
        return acc;
      }, {});
      matchUtilities(
        {
          'progress-bar': (value) => ({
            backgroundColor: value,
            '&::-webkit-progress-bar': {
              backgroundColor: value,
            },
          }),
          'progress-value': (value) => ({
            color: value,
            '&::-webkit-progress-value': {
              backgroundColor: value,
            },
            '&::-moz-progress-bar': {
              backgroundColor: value,
            },
          }),
        },
        {
          values: flattenedColors,
          variants: ['responsive'],
        },
      );
    }),
  ],
};

<progress class="tw-progress-bar-slate-200 tw-progress-value-teal-400"></progress>
<progress class="tw-progress-bar-teal-400 tw-progress-value-rose-400"></progress>

Seems to be working fine for my use case. Also, if anyone knows of a tailwind way to specify the color values without flattening the object, please let me know.

[osbre]

I've used this simple alternative:

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

<progress
    class="h-2 w-full progress-unfilled:bg-[#F2F2F2] progress-filled:bg-red-600"
    value="70"
    max="100"
>
    70%
</progress>

[LJBL22]

I have no idea why my result are these :(
[vite] Pre-transform error: [postcss] plugin is not defined
[vite] Internal server error: [postcss] plugin is not defined
Plugin: vite:css
File: /Users/xxxxxxx/src/index.css:undefined:NaN

but Emmerseren works for me!

[osbre]

@LJBL22 you have to import the plugin:

const plugin = require('tailwindcss/plugin');
// or 
import plugin from 'tailwindcss/plugin';

[lukasvice]

Thanks for this. To make it work properly in Firefox, you have to remove the '&' from progress-filled:

addVariant('progress-unfilled', ['&::-webkit-progress-bar', '&']);
addVariant('progress-filled', ['&::-webkit-progress-value', '&::-moz-progress-bar']);

[GraySepia]

Thanks for this. To make it work properly in Firefox, you have to remove the '&' from progress-filled OneBloodRewards :

addVariant('progress-unfilled', ['&::-webkit-progress-bar', '&']);
addVariant('progress-filled', ['&::-webkit-progress-value', '&::-moz-progress-bar']);

I got sufficient information from your soul of heart. Thank you so much.

[dfallman]

This might not be what you're looking for (and there might be accessibility reasons to stay with progress bar, although they can often be dealt with), but to get a progress bar to look and behave exactly as you want, it's easier to not pick a fight with 10+ subtly different browser implementations and make your own from scratch with Tailwind, :style, and a wee bit of js (in this case, alpinejs)

<div class="flex justify-start items-center">
    <div class="flex-1 p-0.5 rounded border shadow-inner border-gray-300 bg-gray-100">
        <div class="[min-width:4px] h-4 rounded bg-blue-500" :style="`width: ${progress}%;`"></div>
     </div>
</div>