tailwindcss v4 自定义container

Posted by 蓝染君

2025年8月14日

On 2025年8月14日

nextjs15项目使用tailwindcss v4版本

之前v3的 tailwind-config.ts配置信息如下

const config = {
  ...
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
  ...
}

const config = {
  ...
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
  ...
}

v4版本修改如下

@theme {
  --breakpoint-2xl: 1400px;
}

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
}

@theme {
  --breakpoint-2xl: 1400px;
}

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
}

tailwindcss v4官方文档：

Using custom breakpoints
Customizing your theme
Use the --breakpoint-* theme variables to customize your breakpoints:
```
@import "tailwindcss";
@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-2xl: 100rem;
  --breakpoint-3xl: 120rem;
}
```

Container configuration
In v3, the container utility had several configuration options like center and padding that no longer exist in v4.
To customize the container utility in v4, extend it using the @utility directive:
```
@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
}
```

Using custom breakpoints
Customizing your theme
Use the --breakpoint-* theme variables to customize your breakpoints:
```
@import "tailwindcss";
@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-2xl: 100rem;
  --breakpoint-3xl: 120rem;
}
```

Container configuration
In v3, the container utility had several configuration options like center and padding that no longer exist in v4.
To customize the container utility in v4, extend it using the @utility directive:
```
@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
}
```

文章