Is there a way to use pseudo elements like: ::-webkit-slider-thumb?

[stefann01]

I try to customize an input type range using tailwind. However, I don't see in the documentation listed pseudo-elements like webkit-slider-thumb or ::-webkit-slider-runnable-track

[ThatGuySam]

Theoretically, you should be able to do this with arbitrary variants:
https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants

<input class="[&::-webkit-slider-thumb]:bg-blue" type="range">

You may also be able to support multiple browsers by adding it as a variant in your Tailwind config:
https://tailwindcss.com/docs/plugins#adding-variants

// taillwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('slider-thumb', ['&::-webkit-slider-thumb', '&::slider-thumb'])
    })
  ]
}

<input class="slider-thumb:bg-blue" type="range">

[Garrett-R]

Theoretically, you should be able to do this with arbitrary variant

That seems not to be working.

[wongjn]

Arbitrary variant support is v3+, and also bg-pink is not a valid color in the configuration, try a valid color like bg-pink-500. Here is a Tailwind Play with the fixes (open the Generated CSS panel to see the generated class).

[Garrett-R]

Thank you!

Ok, I have a complete working example. It seems you need all these classes (except the bg-gray-100 which I added for convenience) to get a circular thumb slider working:

<input class="appearance-none bg-gray-100 [&::-webkit-slider-thumb]:bg-pink-500 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-5  [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:rounded-full" type="range" />

(TW Play)

and for Firefox, you'd duplicate the arbitrary classes and use -moz-range-thumb.