Why the first child and the last child don't work?

[carveybunt]

In my button Vue component, I set:

……
  <button class="first:rounded-l-full last:rounded-r-full">
    <slot></slot>
  </button>

……
name: 'Button',
……

In my ButtonGroup Vue component, I set:

<template>
  <div class="inline-block">
    <slot></slot>
  </div>
</template>
……
name: 'ButtonGroup',
……

In my parent Vue component, I set:

<button-group>
   <button>one<button>
   <button>two<button>
   <button>three<button>
<button-group>
……

tailwind.config.js:

……
  variants: {
    extend: {
      borderWidth: ['first', 'last'],
      borderRadius: ['first', 'last','hover', 'focus'],
    },
  },
……

Why the style of the first child and the last child didn't work? Could guys help me, pls!

[carveybunt]

It's working after I restart the IDEA.