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

10 messages · Page 1 of 1 (latest)

soft cloak
#

Heya! I'm working on a component using Tailwind CSS, and I’m running into this error:

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

Here’s my component code for context:

<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>

Does anyone know why Tailwind is complaining about md:flex? Is there something I might have misconfigured?

vast carbonBOT
#

Hi @soft cloak. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The error message:

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

indicates that the md (medium breakpoint) variant is not available in your Tailwind CSS configuration. In Tailwind CSS v4 (as used by Nuxt UI), breakpoints and other design tokens are now defined using CSS variables inside a @theme directive in your CSS, rather than in a JavaScript config file. If you haven't defined the md breakpoint in your theme, Tailwind won't generate the corresponding utilities like md:flex.

How to fix:

You need to ensure that your main.css (or equivalent) includes the @theme directive with the required breakpoints. Here’s an example from the Nuxt UI documentation:

@import "tailwindcss";
@import "@nuxt/ui";

@theme static {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

Make sure that --breakpoint-md is defined. If you’re using Nuxt UI or Nuxt UI Pro, these are usually set up for you, but if you’ve customized your theme, you might have omitted them. Add or verify the breakpoints in your @theme block to resolve the error.

Reference:
See the section on customizing breakpoints and the CSS-first configuration approach in the Nuxt UI theming guide: Theme customization with @theme.

If you’re using a custom setup or have removed the default breakpoints, re-add them as shown above. This should restore the md variant and resolve the error.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@soft cloak Kapa.ai is still learning and improving, please let me know how I did by reacting below.

soft cloak
#

Yes, I have the theme layers, generally everything that is in the Tailwind documentation.

round prawn
soft cloak
round prawn
#

if you want to reuse the same styles in many places it's generally better to make a component, otherwise just use it inline

soft cloak
#

Alright, thank you!