@layer order with tailwindcss2, postcss8, vue3

[sotnikovse]

After migration to tailwindcss v2 with postcss v8, @layer directive doesn't work as expected.

/* src/components/Btn/Btn.css */
@layer components {
  .btn {
    @apply text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring h-12 rounded px-3 py-2;
  }
}

// src/components/Btn/index.js
import { defineComponent, h } from 'vue'

import './Btn.css'

export default defineComponent({
  render () {
    return h('button', {
      class: 'btn',
    }, this.$slots.default ? this.$slots.default() : undefined)
  }
})

utilities classes not override .btn components styles.

./views/about.vue

<template>
  <Btn class="text-red-500 bg-green-500">
    Custom class
  </Btn>
</template>

<script setup>
import Btn from '../components/Btn'
</script>

When manually importing component css files into index.css works.
Are there any other options to resolve the issue?