Tailwind CSS 不必要的空格答案

【问题标题】：Tailwind CSS unnecessary whitespaceTailwind CSS 不必要的空格
【发布时间】：2021-09-19 02:11:30
【问题描述】：

我正在尝试使用在顺风工具箱中找到的this admin starter template，并且我正在尝试根据自己的喜好对其进行自定义。我已将模板中的代码拆分为 3 个单独的文件，如下所示，当我将主文件中的 children 变量替换为 test 之类的东西时，我得到一个滚动条，底部有很多额外的空白页面的，如此处所示

“主要”文件导入导航栏和侧边栏，然后还有一个占位符用于主页内容

import Navbar from "@/Components/Layouts/Navbar"
import Sidebar from "@/Components/Layouts/Sidebar"

export default function Main({ name, children }) {

  return (
    <div className="bg-gray-800 flex flex-col h-screen">

      <Navbar />

      <div className="flex flex-col md:flex-row flex-grow">

        <Sidebar />

        <div className="flex-1 bg-gray-100">
          <div className="bg-gray-800 pt-3">
            <div className="rounded-tl-3xl bg-gradient-to-r from-blue-900 to-gray-800 p-4 shadow text-2xl text-white">
              <h3 className="font-bold pl-2">{name}</h3>
            </div>
          </div>
          <div className="p-4">
            {children}
          </div>
        </div>
      </div>
    </div>
  )
}

导航栏

import { useState } from "react";

export default function Navbar() {
  const [dropdownState, setDropdownState] = useState('invisible');

  const toggleDropdown = () => {
    console.log('toggle');
    if (dropdownState) {
      setDropdownState(null);
    } else {
      setDropdownState('invisible')
    }
  }

  return (
    < nav className="bg-gray-800 pt-2 md:pt-1 pb-1 px-1 mt-0 h-auto sticky w-full z-20 top-0" >

      <div className="flex flex-wrap items-center">
        <div className="flex flex-shrink md:w-1/3 justify-center md:justify-start text-white">
          <a href="#">
            <span className="text-xl pl-2"><i className="em em-grinning"></i></span>
          </a>
        </div>

        <div className="flex flex-1 md:w-1/3 justify-center md:justify-start text-white px-2">
          <span className="relative w-full">
            <input type="search" placeholder="Search"
              className="w-full bg-gray-900 text-white transition border border-transparent focus:outline-none focus:border-gray-400 rounded py-3 px-2 pl-10 appearance-none leading-normal" />
            <div className="absolute search-icon" style={{ top: "1rem", left: ".8rem" }}>
              <svg className="fill-current pointer-events-none text-white w-4 h-4"
                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path
                  d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z">
                </path>
              </svg>
            </div>
          </span>
        </div>

        <div className="flex w-full pt-2 content-center justify-between md:w-1/3 md:justify-end">
          <ul className="list-reset flex justify-between flex-1 md:flex-none items-center">
            <li className="flex-1 md:flex-none md:mr-3">
              <a className="inline-block py-2 px-4 text-white no-underline" href="#">Active</a>
            </li>
            <li className="flex-1 md:flex-none md:mr-3">
              <a className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4"
                href="#">link</a>
            </li>
            <li className="flex-1 md:flex-none md:mr-3">
              <div className="relative inline-block">
                <button onClick={toggleDropdown} className="drop-button text-white focus:outline-none">
                  <span className="pr-2"><i className="em em-robot_face"></i></span> Hi, User <svg
                    className="h-3 fill-current inline" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20">
                    <path
                      d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
                  </svg></button>
                <div id="myDropdown"
                  className={"dropdownlist absolute bg-gray-800 text-white right-0 mt-3 p-3 overflow-auto z-30 " + dropdownState}>
                  <a href="#"
                    className="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i
                      className="fa fa-user fa-fw"></i> Profile</a>
                  <a href="#"
                    className="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i
                      className="fa fa-cog fa-fw"></i> Settings</a>
                  <div className="border border-gray-800"></div>
                  <a href="#"
                    className="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i
                      className="fas fa-sign-out-alt fa-fw"></i> Log Out</a>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav >
  )
}

和侧边栏

import { InertiaLink } from "@inertiajs/inertia-react"

export default function Sidebar() {
  const linkClass = (route) => {
    if (window.location.href.indexOf(route) !== -1) {
      return ' border-blue-600'
    } else {
      return ' border-gray-800'
    }
  }

  const iconClass = (route) => {
    if (window.location.href.indexOf(route) !== -1) {
      return ' text-blue-600'
    }
  }

  const textClass = (route) => {
    if (window.location.href.indexOf(route) !== -1) {
      return ' text-white md:text-white'
    } else {
      return ' text-gray-600 md:text-gray-400'
    }
  }

  return (
    <div className="bg-gray-800 shadow-xl h-16 fixed bottom-0 mt-12 md:relative md:h-screen z-10 w-full md:w-48">
      <div
        className="md:mt-12 md:w-48 md:fixed md:left-0 md:top-0 content-center md:content-start text-left justify-between">
        <ul className="list-reset flex flex-row md:flex-col py-0 md:py-3 px-1 md:px-2 text-center md:text-left">
          <li className="mr-3 flex-1">
            <InertiaLink href="/owner/dashboard"
              className={"block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 hover:border-blue-900"
              + linkClass('/owner/dashboard')}>
              <i className={"fas fa-tv pr-2 "
              + iconClass('/owner/dashboard')}></i><span
                className={"pb-1 md:pb-0 text-xs md:text-base block md:inline-block"
                + textClass('/owner/dashboard')}>Dashboard</span>
            </InertiaLink>
          </li>
          <li className="mr-3 flex-1">
            <InertiaLink href="/owner/restaurants"
              className={"block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 hover:border-blue-900"
              + linkClass('/owner/restaurants')}>
              <i className={"fa fa-utensils pr-2 "
              + iconClass('/owner/restaurants')}></i><span
                className={"pb-1 md:pb-0 text-xs md:text-base block md:inline-block"
                + textClass('/owner/restaurants')}>Restaurants</span>
            </InertiaLink>
          </li>
          <li className="mr-3 flex-1">
            <a href="#"
              className={"block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 hover:border-blue-900"
              + linkClass('/owner/layouts')}>
              <i className={"fas fa-pencil-ruler pr-2 "
              + iconClass('/owner/layouts')}></i><span
                className={"pb-1 md:pb-0 text-xs md:text-base block md:inline-block"
                + textClass('/owner/layouts')}>Layouts</span>
            </a>
          </li>
          <li className="mr-3 flex-1">
            <a href="#"
              className={"block py-1 md:py-3 pl-0 md:pl-1 align-middle text-white no-underline hover:text-white border-b-2 hover:border-blue-900"
              + linkClass('/owner/payments')}>
              <i className={"fa fa-wallet pr-2 "
              + iconClass('/owner/payments')}></i><span
                className={"pb-1 md:pb-0 text-xs md:text-base block md:inline-block"
                + textClass('/owner/payments')}>Payments</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  )
}

编辑这是一个 codepen 的链接，其中包含帮助调试的代码https://codepen.io/hcphoon01/pen/OJmXrRN

更新我现在已经修复了一个问题，但又创建了另一个问题，我通过将最高级别的 div 更改为 <div className="bg-gray-800 flex flex-col h-screen"> 然后在上面的 div 上添加 flex-grow 来解决空白问题包括侧边栏，尽管现在的问题是如果内容大于屏幕，侧边栏不会增长到适合。 Codepen 已更新以反映这一点

【问题讨论】：

请创建一个代码沙箱以便于调试。或者只是使用您的检查器直接检查 css。根据您给出的内容，我猜当您将侧边栏设置为 h-screen 然后为其他组件提供边距时，它会推动页面甚至比屏幕的高度更长。尝试调整边距。

标签： html css reactjs tailwind-css inertiajs

【解决方案1】：

检查您的Sidebar 组件。它必须是 h-auto 或 h-full 或 h-initial 而不是 h-screen。因为它放在main组件中，所以只有main应该是h-screen。

请更改此代码，而不是使用h-screen。

<div class="bg-gray-800 shadow-xl h-16 bottom-0 mt-12 md:relative z-10 w-full md:w-48">

查看Tailwind Paly

有关 CSS 中视口单元的更多信息，请查看此网站doc

【讨论】：

我刚刚尝试过，但现在的问题是，如果我将h-screen 添加到顶级div，删除this issue，然后将h-screen 添加到下面的div在包含侧边栏的地方，为了让主要内容成为全高，我在底部的空白处再次遇到同样的问题
检查已编辑。你可以在那里调整你的修复。

【解决方案2】：

当您添加h-screen 类时，它会将高度设置为100vh，这将跨越视口的高度。这里的问题是，由于我们正在固定高度，<div> 不会增长到适合其子级，并且会溢出。

要解决这个问题，我们可以使用min-h-screen 实用程序类来设置min-height。这将允许<div> 增长以适应其子级，但防止其缩小到视口高度以下。我在您提供的 CodePen 中对此进行了尝试，它似乎可以满足您的要求。

注意：在移动设备上使用 100vh 有一些怪癖。只需搜索“100vh 移动问题”即可找到更多信息，但您应该对其进行测试以查看此行为是否是您想要的。或者，您可以将百分比单位与h-full/min-h-full 一起使用，但您必须确保所有祖先都将height/min-height 设置为100%，包括<body> 和@987654334 @标签。自己在各种移动浏览器上进行测试，以确定哪一种更适合您的应用程序。

【讨论】：

【解决方案3】：

在主文件的父 div 上，将 m-0 p-0 添加到 className，在“Test”的 div 上，将 whitespace-normal 添加到 className，如下所示：

import Navbar from "@/Components/Layouts/Navbar"
import Sidebar from "@/Components/Layouts/Sidebar"

export default function Main({ name, children }) {

  return (
    <div className="m-0 p-0 bg-gray-800 flex flex-col h-screen">

      <Navbar />

      <div className="flex flex-col md:flex-row flex-grow">

        <Sidebar />

        <div className="flex-1 bg-gray-100">
          <div className="bg-gray-800 pt-3">
            <div className="rounded-tl-3xl bg-gradient-to-r from-blue-900 to-gray-800 p-4 shadow text-2xl text-white">
              <h3 className="font-bold pl-2">{name}</h3>
            </div>
          </div>
          <div className="p-4 whitespace-normal">
            Test
          </div>
        </div>
      </div>
    </div>
  )
}

【讨论】：