why tailwind compile the following classname that seems not intuitive?

Question

I'm new to Tailwind , Im curios about why Tailwind compile the following class in an file input element: hover:file:bg-violet-100 to .hover\:file\:bg-violet-100::file-selector-button:hover

I thought it will compile it to .hover\:file\:bg-violet-100:hover::file-selector-button becaus it seems more intuitive

Similiarly , Tailwind compile the following class : file:hover:bg-violet-100 to .file\:hover\:bg-violet-100:hover::file-selector-button which is not the class I thought : .file\:hover\:bg-violet-100::file-selector-button:hover

Can anybody tell me why ? thank you ! I will realy appreciate if anybody can resolve my question.

I am trying understanding the compiliation order for pseudo-element in Tailwind.

Answer 1

As per the documentation on ordering of stacked modifiers:

When stacking modifiers, they are applied from the inside-out, like nested function calls:

// These modifiers:
'dark:group-hover:focus:opacity-100'

// ...are applied like this:
dark(groupHover(focus('opacity-100')))

Hence, for hover:file:bg-violet-100:

hover:file:bg-violet-100
                ↓
     hover:bg-violet-100::file-selector-button
                ↓
           bg-violet-100::file-selector-button:hover

and for file:hover:bg-violet-100:

file:hover:bg-violet-100
                ↓
      file:bg-violet-100:hover
                ↓
           bg-violet-100:hover::file-selector-button