如何将Nuxt Modal宽度设为屏幕50%？尝试CSS及Tailwind无效

你尝试给外层div加Tailwind类、自定义CSS类都没效果，核心原因是这些样式没有作用到Nuxt UI Modal的内容容器元素上——Modal本身会被挂载到独立层级（比如body下），外层包裹div的样式无法影响它，而自定义CSS选择器可能不够精准。

下面是三个可行的解决思路：

思路一：用组件内置的content-class属性直接设置 #

Nuxt UI的UModal组件提供了content-class prop，专门用来给Modal的内容容器添加样式类，直接传入Tailwind类即可：

<template>
  <div>
    <UButton icon="i-heroicons-plus" variant="solid" target="_self" @click="open">
      Show Dependencies
    </UButton>
    <!-- 给UModal添加content-class属性 -->
    <UModal v-model="show" content-class="w-1/2 mx-auto">
      <UCard>
        <template #header>
          <div class="flex justify-end">
            <UButton icon="i-heroicons-x-mark-20-solid" variant="ghost" @click="close" />
          </div>
        </template>
        <div>
          <div v-if="error">
            <p>Error: {{ error.message }}</p>
          </div>
          <div v-else-if="!rootNodes.length">
            <p>Loading...</p>
          </div>
          <div v-else>
            <div v-for="(node, index) in rootNodes" :key="index">
              <ScheduleNode :schedule="node" />
            </div>
          </div>
        </div>
      </UCard>
    </UModal>
  </div>
</template>

思路二：精准选择Modal内容容器写自定义CSS #

如果想用原生CSS，可以直接针对Nuxt UI Modal的默认内容容器类.nuxt-ui-modal-content设置样式：

.nuxt-ui-modal-content {
  width: 50% !important;
  max-width: 50% !important;
  margin-left: auto;
  margin-right: auto;
  top: 50%;
  transform: translateY(-50%);
}

如果只想修改某个特定Modal，可以给UModal加自定义类，再通过后代选择器定位：

<UModal v-model="show" class="custom-modal">
  <!-- 内容不变 -->
</UModal>

.custom-modal .nuxt-ui-modal-content {
  width: 50%;
  max-width: 50%;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

思路三：全局配置所有Modal的宽度 #

如果希望项目中所有Modal都默认使用50%宽度，可以在nuxt.config.ts里通过Nuxt UI的主题配置修改：

export default defineNuxtConfig({
  ui: {
    modal: {
      content: 'w-1/2 mx-auto'
    }
  }
})

内容的提问来源于stack exchange，提问作者stewchicken