Tailwind内边距、外边距及间距工具类失效问题求助

1. 初始化Tailwind v4浏览器版本 #

你使用的是Tailwind v4的@tailwindcss/browser包，该版本需要手动初始化才能生成工具类样式。在引入CDN脚本后添加初始化代码：

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<script>tailwind.init()</script>

2. 解决CSS优先级冲突 #

你的自定义CSS代码覆盖了Tailwind工具类的样式，需要做以下调整：

• 移除容器样式覆盖：自定义的nav.container选择器优先级高于Tailwind的.container类，导致mx-auto p-6失效。删除这段自定义代码，直接依赖Tailwind工具类：

  /* 删掉这段冗余代码 */
  nav.container {
    padding: 24px;
    margin-inline: auto;
  }
  

• 移除导航链接的自定义间距：自定义的.navbar a和.navbar a:last-child样式会抵消space-x-6的作用，删除这两段代码，保留Tailwind的space-x-6即可实现子元素间距：

  /* 删掉这两段代码 */
  .navbar a {
    margin-inline-end: 24px;
  }
  
  .navbar a:last-child {
    margin-inline-end: 0;
  }
  

3. 统一样式写法 #

你的.btn-nav类与Tailwind的py-2 px-6实现的效果完全等价（8px = 2×4px，24px = 6×4px），建议统一使用其中一种方式，避免样式冗余和冲突。

调整后的完整代码示例 #

HTML

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<script>tailwind.init()</script>
<nav class="container mx-auto p-6">
  <div class="flex items-center justify-between">
    <div>
      <img src="./imgs/Tailwind_LightBG_logo.svg.png" alt="logo tailwind" width="200px">
    </div>
    <div class="navbar hidden md:flex space-x-6 items-center">
      <a href="#" class="text-slate-900 hover:text-slate-500">Portfolio</a>
      <a href="#" class="text-slate-900 hover:text-slate-500">About</a>
      <a href="#" class="text-slate-900 hover:text-slate-500">Contact</a>
      <a href="#" class="text-slate-900 hover:text-slate-500">Social</a>
      <a href="#" class="rounded-full py-2 px-6 text-white bg-orange-500 transition-all duration-500 ease-in-out hover:bg-slate-900">Call Me</a>
    </div>
    <div id="mobile-btn" class="md:hidden">
      <i class="ri-menu-line text-2xl"></i>
    </div>
  </div>
</nav>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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