Issue rounding suggestions list corners; mystery unnamed parent div with white bg

[dylanjt]

Steps to reproduce:

1. Following the css modules example using tailwind classes:

.mentions {
}

.mentions--multiLine .mentions__control {
  @apply bg-transparent;
}
.mentions--multiLine .mentions__highlighter {
  min-height: 1rem;
  border: 0px !important;
  @apply font-sans font-light text-white;
}
.mentions--multiLine .mentions__input {
  outline: 0;
  border: 0px !important;
  @apply font-sans font-light text-white;
}

.mentions__suggestions__list {
  @apply bg-gray-800 rounded;
}

.mentions__suggestions__item {
  @apply px-2 rounded;
}

.mentions__suggestions__item--focused {
  @apply bg-purple-900/60;
}

.mentions__mention {
  @apply relative z-10 font-sans font-light border-0 text-purple-400;
}

Expected behaviour: The suggestions list is rounded.

Observed behaviour: The suggestions list is rounded, but appears rounded within a white div, so the corners of the list have white square edges. When I inspect the DOM, I see the div mentions--multiLine, which has a child div with no class name (this appears to be the problem). This child div is the parent of suggestions_list, and has the style "position: absolute; left: 31px; top: 3px; z-index: 1; background-color: white; margin-top: 14px; min-width: 100px;" Any idea what is causing this??

Workaround: Have not found a workaround. Currently, I'm not using rounded corners. But I think it looks really good with them!

[kaungmyatlwin]

+1 for this. I'm having issues like this as well.

[fredmanxu]

It worked for me.

.mentions--multiLine {
  div:last-of-type {
    background-color: transparent !important;
  }
}