vite-plugin-windicss before:,after: not working

Markup:

<div
  class="divider
    block relative flex
    justify-center items-center
    -left-1/2
    mt-6 mr-0 ml-2 -mb-4 h-px
    text-xs font-semibold tracking-wide
    leading-4 text-gray-600 uppercase
    bg-transparent
    before:w-24
    before:border-b
    before:border-gray-200
    before:border-dashed
    after:w-24
    after:border-b
    after:border-gray-200
    after:border-dashed"
>
  <slot />
</div>

Rendered HTML:

<div class="divider block relative flex justify-center items-center
 -left-1/2 mt-6 mr-0 ml-2 -mb-4 h-px text-xs font-semibold
tracking-wide leading-4 text-gray-600 uppercase bg-transparent
before:w-24 before:border-b before:border-gray-200 before:border-dashed
after:w-24 after:border-b after:border-gray-200 after:border-dashed s-Q5e2WE6XUQsY"></div>

Generated CSS:

.tracking-wide {
    letter-spacing: 0.025em !important;
}

.uppercase {
    text-transform: uppercase !important;
}

.text-gray-600 {
    --tw-text-opacity: 1 !important;
    color: rgba(75, 85, 99, var(--tw-text-opacity)) !important;
}

.-left-1\/2 {
    left: -50% !important;
}

.relative {
    position: relative !important;
}

.-mb-4 {
    margin-bottom: -1rem !important;
}

.ml-2 {
    margin-left: 0.5rem !important;
}

.mt-6 {
    margin-top: 1.5rem !important;
}

.mr-0 {
    margin-right: 0px !important;
}

.leading-4 {
    line-height: 1rem !important;
}

.text-xs {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
}

.h-px {
    height: 1px !important;
}

.font-semibold {
    font-weight: 600 !important;
}

.justify-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    -webkit-justify-content: center !important;
    justify-content: center !important;
}

.items-center {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    -webkit-align-items: center !important;
    align-items: center !important;
}

.flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
}

.block {
    display: block !important;
}

.bg-transparent {
    background-color: transparent !important;
}

Config (windi.config.cjs) This was a tailwind.config.cjs file, I just quickly changed some stuff to get Windi working.

const colors = require('windicss/colors');
const typography = require('windicss/plugin/typography');

module.exports = {
  corePlugins: {
    gridTemplateColumns: true,
  },
  darkMode: "class",
  important: true,
  theme: {
    extend: {
      animation: {
        'highlight-red': 'highlight-red 1s'
      },
      boxShadow: {
        left: '-8px 0px 15px -3px rgba(0, 0, 0, 0.05)'
      },
      keyframes: {
        'highlight-red': {
          '0%': {
            color: 'red'
          },
          '100%': {
            color: '#333'
          }
        }
      },
      transitionProperty: {
        'border-bottom-color': 'border-bottom-color'
      },
      transitionDuration: {
        '0': '0ms'
      },
      backgroundColor: {
        theme: {
          white: 'var(--color-white)',
          black: 'var(--color-black)',
          light: 'var(--color-light)',
          dark: 'var(--color-dark)'
        }
      }
    },
  },
  plugins: [typography],
};

Versions:

@windicss/config: 1.3.0 @windicss/plugin-utils: 1.30 vite-plugin-windicss: 1.3.0 windicss: 3.17