响应式侧边栏顺风css

Question

长期以来，我一直在努力使用 tailwindcss 制作响应式侧边栏。 目前它看起来像这样

当我在 1920x1080 屏幕上使用它时看起来不错，但在更大或更小的屏幕上却不行。 当我将其缩小时，文本彼此太靠近并且看起来不太好

我希望它在分辨率较小时隐藏该侧边栏，而不是该侧边栏，将有一个打开侧边栏的按钮，当我放大（使用 ctrl + PLUS）该侧边栏（放大）时

我的 html 当前代码

<div class="scale-90">
  <div class="flex flex-wrap w-full h-screen">
    <div class="xs:w-3/12 xs:h-128 w-3/12 visible xm:invisible bg-gradient-to-tr rounded-3xl from-black  via-gray-900 to-black p-3 shadow-lg ">
    <div class="h-screen sticky top-0">
        <div class="flex space-x-4 p-2 mt-4 mb-8 justify-center ">
            <img class="h-20 align-middle" src="src/assets/fx-culture.png" alt="James Bhatta">
        </div>
         <div class="mr-32">
        <div class="flex justify-center mr-16">
          <img class="h-12 align-middle rounded-full" src="src/assets/logo1.png">

        </div>
        <ul class="space-y-10 text-sm">
            <li>
              <a class="flex items-center mr-16 space-x-3 justify-center text-gray-500 text-xl p-2 font-medium">
                <span>Hello</span>
              </a>
              <a class="flex items-center ml-5 mb-20 space-x-3 justify-center text-white text-xl p-2 font-medium">
                <span>Kristian Kotlar</span>
              </a>
            </li>
            <li>
                <a href="#" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 text-2xl p-2 font-medium hover:text-white focus:shadow-outline">
                    <span>My profile</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center ml-10 space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
                    <span>Subscriptions</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center space-x-3 justify-center text-white transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
                    <span>Academy</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
                    <span>Calendar</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center mt-32 space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
                    <span>Settings</span>
                </a>
            </li>
            <li>
                <a href="" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
                    <span>Sign Out</span>
                </a>
            </li>
          
        </ul>
        </div>
    </div>
    </div>

    <div class="xs:w-8/12 w-8/12 xs:ml-20 xm:12/12 bg-white rounded-3xl">
        <div class="grid place-items-center min-h-screen">
    <div class="p-4 justify-items-center xs:justify-items-start max-w-5xl grid gap-x-24 gap-y-8  xs:gap-y-12 xs:gap-x-128 xs:grid-cols-3 xs:p-1 ">
      <h1 class="text-4xl font-extrathick xs:col-span-3 xs:grid xs:gap-4 xs:grid-cols-3">Webinars</h1>
      <div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl">
          <img src="src/assets/logo.png" class="mx-auto">
          <h1 class="text-3xl font-extralight text-gray-500 text-center">
            <span class="">Beginners</span>
          </h1>
      </div>
      <div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl">
        <img src="src/assets/logo.png" class="mx-auto">
          <h1 class="text-3xl font-extralight text-gray-500 text-center">
            <span class="">Advanced</span>
          </h1>
      </div>
      <div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl">
        <img src="src/assets/logo.png" class="mx-auto">
          <h1 class="text-3xl font-extralight text-gray-500 text-center">
            <span class="">Professional</span>
          </h1>
      </div>
       <h1 class="text-4xl font-extrathick xs:col-span-3 xs:grid xs:gap-4 xs:grid-cols-3">Academy</h1>
      <div class="h-96 w-256  overflow-auto inline-block ">
        <table class="min-w-full">
                <tbody>
                    <tr class="bg-gray-200">
                        <td class="p-3 px-6 py-4 text-gray-700">
                            asdasdasdasdasd
                        </td>
                        <td class="px-6 text-gray-700">
                            1:27:21
                        </td>
                    </tr>
          <tr class="pt-8">
                        <td class="px-6 py-4 text-gray-700">
                            asdasdasdasdasdsssssssssssss
                        </td>
                        <td class="px-6 text-gray-700">
                            0:19:21
                        </td>
                    </tr>
            <tr class="bg-gray-200">
                        <td class="p-3 px-6 py-4 text-gray-700">
                            asdasdasdasdasd
                        </td>
                        <td class="px-6 text-gray-700">
                            0:20:21
                        </td>
                    </tr>
           <tr class="pt-8">
                        <td class="px-6 py-4 text-gray-700">
                            asdasdasdasdasdsssssssssssss
                        </td>
                        <td class="px-6 text-gray-700">
                            1:13:37
                        </td>
          </tr>
            <tr class="bg-gray-200">
                        <td class="p-3 px-6 py-4 text-gray-700">
                            asdasdasdasdasd
                        </td>
                        <td class="px-6 text-gray-700">
                            0:55:01
                        </td>
          </tr>
                   <tr class="pt-8">
                        <td class="px-6 py-4 text-gray-700">
                            asdasdasdasdasdsssssssssssss
                        </td>
                        <td class="px-6 text-gray-700">
                            1:13:37
                        </td>
          </tr>
          
            <tr class="bg-gray-200">
                        <td class="p-3 px-6 py-4 text-gray-700">
                            asdasdasdasdasd
                        </td>
                        <td class="px-6 text-gray-700">
                            0:55:01
                        </td>
          </tr>
                </tbody>
            </table>
      </div>
      <div class="h-96 w-256 xs:ml-36 bg-gray-100 rounded-xl">
          
      </div>
    </div>

  </div>
    </div>
</div>
</div>

和我的 tailwind.config.js 文件

const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    
    extend: {
      width: {
        '256': '30rem',
      },
      height: { 
        '128': '61rem',
      },
    },
    screens: {
      xs: "1390px",
      md: "1040px",
      xdd: "1000px",
      ...defaultTheme.screens,
    }
  
  },
  plugins: [],
}

Answer 1

要在小屏幕上隐藏侧边栏，您可以在默认情况下简单地隐藏侧边栏，然后在大屏幕上显示它。 您可以在 Tailwind 文档中了解更多信息

还添加一个切换图标，该图标将在较小的屏幕上显示并在较大的屏幕上隐藏，最后您可以添加 Javascript 以在较小的屏幕上显示隐藏的侧边栏作为覆盖。

我在 codepen 上做了一个快速的实现（虽然没有 Javascript 切换功能），随意复制代码并添加你的 javascript 切换 function。

在 Codepen 上查看

 <script src="https://cdn.tailwindcss.com"></script> <div class="scale-90"> <button aria-expanded="true" aria-controls="sidebar" class="lg:hidden text-gray-600 hover:text-gray-900 cursor-pointer rounded"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path> </svg> <svg class="w-6 h-6 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button> <div class="flex flex-wrap w-full h-screen"> <div class="hidden lg:block xs:w-3/12 xs:h-128 w-3/12 visible xm:invisible bg-gradient-to-tr rounded-3xl from-black via-gray-900 to-black p-3 shadow-lg "> <div class="h-screen sticky top-0"> <div class="flex space-x-4 p-2 mt-4 mb-8 justify-center "> <img class="h-20 align-middle" src="src/assets/fx-culture.png" alt="James Bhatta"> </div> <div class="mr-32"> <div class="flex justify-center mr-16"> <img class="h-12 align-middle rounded-full" src="src/assets/logo1.png"> </div> <ul class="space-y-10 text-sm"> <li> <a class="flex items-center mr-16 space-x-3 justify-center text-gray-500 text-xl p-2 font-medium"> <span>Hello</span> </a> <a class="flex items-center ml-5 mb-20 space-x-3 justify-center text-white text-xl p-2 font-medium"> <span>Kristian Kotlar</span> </a> </li> <li> <a href="#" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 text-2xl p-2 font-medium hover:text-white focus:shadow-outline"> <span>My profile</span> </a> </li> <li> <a href="#" class="flex items-center ml-10 space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline"> <span>Subscriptions</span> </a> </li> <li> <a href="#" class="flex items-center space-x-3 justify-center text-white transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline"> <span>Academy</span> </a> </li> <li> <a href="#" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline"> <span>Calendar</span> </a> </li> <li> <a href="#" class="flex items-center mt-32 space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline"> <span>Settings</span> </a> </li> <li> <a href="" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline"> <span>Sign Out</span> </a> </li> </ul> </div> </div> </div> <div class="xs:w-8/12 w-8/12 xs:ml-20 xm:12/12 bg-white rounded-3xl"> <div class="grid place-items-center min-h-screen"> <div class="p-4 justify-items-center xs:justify-items-start max-w-5xl grid gap-x-24 gap-y-8 xs:gap-y-12 xs:gap-x-128 xs:grid-cols-3 xs:p-1 "> <h1 class="text-4xl font-extrathick xs:col-span-3 xs:grid xs:gap-4 xs:grid-cols-3">Webinars</h1> <div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl"> <img src="src/assets/logo.png" class="mx-auto"> <h1 class="text-3xl font-extralight text-gray-500 text-center"> <span class="">Beginners</span> </h1> </div> <div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl"> <img src="src/assets/logo.png" class="mx-auto"> <h1 class="text-3xl font-extralight text-gray-500 text-center"> <span class="">Advanced</span> </h1> </div> <div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl"> <img src="src/assets/logo.png" class="mx-auto"> <h1 class="text-3xl font-extralight text-gray-500 text-center"> <span class="">Professional</span> </h1> </div> <h1 class="text-4xl font-extrathick xs:col-span-3 xs:grid xs:gap-4 xs:grid-cols-3">Academy</h1> <div class="h-96 w-256 overflow-auto inline-block "> <table class="min-w-full"> <tbody> <tr class="bg-gray-200"> <td class="p-3 px-6 py-4 text-gray-700"> asdasdasdasdasd </td> <td class="px-6 text-gray-700"> 1:27:21 </td> </tr> <tr class="pt-8"> <td class="px-6 py-4 text-gray-700"> asdasdasdasdasdsssssssssssss </td> <td class="px-6 text-gray-700"> 0:19:21 </td> </tr> <tr class="bg-gray-200"> <td class="p-3 px-6 py-4 text-gray-700"> asdasdasdasdasd </td> <td class="px-6 text-gray-700"> 0:20:21 </td> </tr> <tr class="pt-8"> <td class="px-6 py-4 text-gray-700"> asdasdasdasdasdsssssssssssss </td> <td class="px-6 text-gray-700"> 1:13:37 </td> </tr> <tr class="bg-gray-200"> <td class="p-3 px-6 py-4 text-gray-700"> asdasdasdasdasd </td> <td class="px-6 text-gray-700"> 0:55:01 </td> </tr> <tr class="pt-8"> <td class="px-6 py-4 text-gray-700"> asdasdasdasdasdsssssssssssss </td> <td class="px-6 text-gray-700"> 1:13:37 </td> </tr> <tr class="bg-gray-200"> <td class="p-3 px-6 py-4 text-gray-700"> asdasdasdasdasd </td> <td class="px-6 text-gray-700"> 0:55:01 </td> </tr> </tbody> </table> </div> <div class="h-96 w-256 xs:ml-36 bg-gray-100 rounded-xl"> </div> </div> </div> </div> </div> </div>