Tailwind CSS导航栏内容偏移无法居中对齐屏幕问题求解

你的代码存在两个直接导致居中失效的问题：

• 类名使用混淆：Tailwind CSS 中表示元素占满父级100%宽度的正确类是w-full，你写的w-100是Bootstrap框架的宽度类，不属于Tailwind内置的默认类。默认配置下Tailwind的w-后接纯数字对应固定尺寸（基于spacing刻度，比如w-4对应1rem宽度），未自定义配置的话w-100不会被编译为宽度100%的样式，会导致nav标签宽度表现不符合预期，内部mx-auto的居中计算基准错误，最终出现偏移。
• 如果你关闭了Tailwind的预飞（Preflight）样式重置，浏览器默认给body标签添加的8px外边距，也会造成视觉上的位置偏移。

1. 修正ContactBar.vue组件中nav标签的宽度类名，替换错误的w-100为w-full，修正后的组件代码如下：

<!-- ContactBar.vue -->
<template>
  <nav class="bg-neutral-900 w-full">
    <div class="mx-auto p-4 max-w-7xl text-zinc-300">
      <p>abc</p>
    </div>
  </nav>
</template>

2. 如果修改后仍存在细微偏移，检查是否开启了Tailwind的预飞配置，未开启的话可以在全局样式中手动补上边距重置：

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

body {
  margin: 0;
}

修改完成后刷新页面，导航内容即可正常居中对齐。

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