Container
一个容器，允许你居中和限制内容的宽度。
原理
Container.ts
export default {
base: 'w-full max-w-(--content-container) mx-auto px-4 sm:px-6 lg:px-8'
}
这段配置定义了一个响应式布局容器的基准样式，结合 Tailwind CSS 的原子化类与 CSS 变量实现自适应布局。动态设置最大宽度为 CSS 变量 --ui-container 的值。
w-full：宽度占满父容器（width: 100%）max-w-(--ui-container)：动态设置最大宽度为 CSS 变量--ui-container的值mx-auto：水平方向自动外边距，实现容器居中（margin-left: auto; margin-right: auto）
用法
<template>
<UContainer>
<Placeholder class="h-32" />
</UContainer>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
Slots
| Slot | Type |
|---|---|
default |
|
Theme
app.config.ts
export default defineAppConfig({
ui: {
container: {
base: 'w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8'
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
container: {
base: 'w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8'
}
}
})
]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
ui: {
container: {
base: 'w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8'
}
}
})
]
})