Removing Default Arrow on Select Tag

I had this case where I need to remove the base arrow of the select tag.

arrow-down

Well, well...

Since I'm using Tailwind CSS, I went to its official documentation and okay, I just need to use the appearance-none class.

But, it didn't work.

After did some researches, turned out that adding appearance-none did nothing. I had to add the bg-none to remove the default base arrow completely.

And it worked.