Nuxt•3mo ago

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

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.

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

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

8 Replies

kapa.ai•3mo ago

Hi @Fedox. 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.

[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;
}

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

kapa.ai•3mo ago

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

FedoxOP•3mo ago

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

amplitudes•3mo ago

if you're using tailwind v4, it's probably because you haven't used an @reference in your style tag

FedoxOP•3mo ago

Yeah, im searching a way to do it without the reference tag, because its really annoying to reference a file in EVERY style tag in the project

amplitudes•3mo ago

making classes like that kind of goes against the principles of tailwind, as far as i know there's no alternative except for downgrading to v3 if you want to reuse the same styles in many places it's generally better to make a component, otherwise just use it inline

FedoxOP•3mo ago

Alright, thank you!

amplitudes•3mo ago

np!

Gaming

Programming

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

Did you find this page helpful?