如何使用Tailwind CSS去除导航栏上下的空白区域？

尝试去除页面导航栏上下的空白区域，已经试过所有能找到的将margin设为0的方案，但问题依然存在。页面效果如下：

我的HTML代码如下：

<!DOCTYPE html>
<html>

<head>
    <title>Names Generator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">

    <link rel="apple-touch-icon" sizes="180x180" href="/Images/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/Images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/Images/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/Images/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href="/Images/favicon.ico">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="msapplication-config" content="/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <link href="/dist/output.css" rel="stylesheet">


</head>

<body class="tw-m-0 tw-bg-cyan-600">
    <nav class="navbar navbar-expand-lg bg-body-tertiary tw-m-0">
        <div class="container-fluid tw-bg-cyan-600">
            <a class="navbar-brand tw-text-white" href="#">Home</a>
            <button class="navbar-toggler tw-text-white" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon tw-fill-white"></span>
            </button>
            <div class="collapse navbar-collapse tablet:tw-flex tablet:tw-justify-end" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link tw-text-white" href="#">Post 1</a>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link tw-text-white" href="#">Post 2</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container tw-m-0">
        <h1 class="h1 text-center tw-m-0">Generator</h1>
        <img src="/Images/android-chrome-192x192.png" class="rounded mx-auto d-block" alt="Name Generator Logo"
            width="40" height="40" href="#" />
    </div>
</body>

</html>

请问问题可能出在哪里？

问题根源不是margin，而是Bootstrap的navbar默认带有内边距（padding），另外你给nav标签加的bg-body-tertiary类会设置默认背景色，和内层的tw-bg-cyan-600形成视觉上的空白边界，放大了问题。

按以下步骤修改即可解决：

1. 移除nav上的bg-body-tertiary类，把背景色类直接加在nav上，避免层级冲突：

<nav class="navbar navbar-expand-lg tw-bg-cyan-600 tw-m-0">

2. 给navbar添加内边距清零的类，可用Bootstrap原生的p-0或Tailwind的tw-p-0：

<nav class="navbar navbar-expand-lg tw-bg-cyan-600 tw-m-0 tw-p-0">

3. 补充重置body的默认内边距，虽然你加了tw-m-0，但body默认可能有padding，加上tw-p-0更稳妥：

<body class="tw-m-0 tw-p-0 tw-bg-cyan-600">

这样修改后，导航栏上下的空白就能完全去除了。

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