[TailwindCSS V4] Cannot apply utility class ... (In the style tag)

[plugin:@tailwindcss/vite:generate:serve] Cannot apply utility class `md:flex` because the `md` variant does not exist.

<script lang="ts" setup>
const { name, align, type } = defineProps<{
  name: string
  align: 'left' | 'right'
  type: 'minecraft' | 'discord'
}>()

const { t } = useI18n()


const value = ref(0)
</script>

<template>
  <div class="status-top">
    <div
      :class="[
        'status-container',
        align === 'right' ? 'items-end text-right' : 'items-start text-left',
      ]"
    >
      <a
        id="server-glow"
        :class="{
          'self-start': align === 'left',
          'self-end': align === 'right',
        }"
        class="online-count text-xs"
      >
        {{ value }}
        {{
          type === 'minecraft'
            ? t('header_stats.stats.players')
            : t('header_stats.stats.online')
        }}
      </a>

      <div
        :class="{
          'text-left': align === 'left',
          'text-right': align === 'right',
        }"
        class="flex flex-col"
      >
        <p class="minecrafter text-3xl">{{ name }}</p>
        <a class="copy-text">{{ t('header_stats.actions.copy') }}</a>
      </div>
    </div>
  </div>
</template>

<style scoped>
.status-top {
  @apply hidden md:flex items-center gap-2;
}

.status-container {
  @apply flex flex-col;
}

.copy-text {
  @apply cursor-pointer text-[0.7rem] text-white hover:text-gray-300;
}

.online-count {
  padding: 4px;
  border-radius: 5px;
  background-color: var(--color-lighter-primary);
  color: var(--color-text-darker);
}
</style>