NextJS集成TailwindCSS时items-center类不生效问题求助

我使用NextJS搭配TailwindCSS，已完成官方配置流程，背景色（bg-*）、宽度类（w-*）可正常工作，但items-center类无法实现子元素居中，子元素仍靠左排列。

示例代码 #

<div className="w-screen bg-[#444] items-center">
  <div className="max-w-[200px] bg-[#AAA]">
    {/* 子元素内容 */}
  </div>
</div>

上述代码中w-screen和bg-[#444]正常生效，但items-center未产生预期效果。

相关配置文件 #

tailwind.config.js #

module.exports = {
    content: [
      './pages/**/*.{js,ts,jsx,tsx}',
      './components/**/*.{js,ts,jsx,tsx}',
    ],
    plugins: [],
  }

postcss.config.js #

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

globals.css #

@tailwind base;
@tailwind components;
@tailwind utilities;

_app.js #

import '../styles/globals.css'
// 其他业务代码

items-center是Flex布局专属的对齐类，仅当父元素被设置为Flex容器时才会生效。你需要给父div添加flex类，才能让items-center发挥作用：

<div className="w-screen bg-[#444] flex items-center">
  <div className="max-w-[200px] bg-[#AAA]">
    {/* 子元素内容 */}
  </div>
</div>

如果需要让子元素在水平方向也居中，可额外添加justify-center类：

<div className="w-screen bg-[#444] flex items-center justify-center">
  <div className="max-w-[200px] bg-[#AAA]">
    {/* 子元素内容 */}
  </div>
</div>

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