Точки останова, реагирующие на попутный ветер, применяются только к некоторым свойствам стиля. ⇐ CSS

[Anonymous]

В моем приложении React + Tailwindcss у меня есть следующая кнопка, которая по какой-то причине все еще видна за пределами точки останова md (>1200 пикселей).
function MobileDrawerTrigger({ openDrawer }: { openDrawer: () => void }) {
return (



);
}

Я попытался выяснить, почему, и понял, что она (точка останова) не работает для некоторых стилей. Я прибегнул к такому стилизации ниже. Однако это не элегантно, и добавлять его каждый раз, когда я хочу, чтобы элемент отображался или нет, в зависимости от точки останова, довольно сложно.
function MobileDrawerTrigger({ openDrawer }: { openDrawer: () => void }) {
return (



);
}

Что может быть причиной этого?
Это мой файл Tailwind.config.js:
/** @type {import('tailwindcss').Config} */
import flowbite from "flowbite/plugin";

export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
"node_modules/flowbite-react/lib/esm/**/*.js",
],
theme: {
extend: {
fontFamily: {
sans: ["Assistant", "sans-serif"],
poppins: ["Poppins"],
},
animation: {
"bounce-small":
"bounce-small 1s cubic-bezier(0.10, 0.1, 0.25, 1.0) infinite",
},
keyframes: {
"bounce-small": {
"0%, 100% ": {
transform: "translateY(0)",
},
"50%": {
transform: "translateY(-8%)",
},
},
},
},
},
plugins: [flowbite],
};

Это мой файл index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
/* Hide scrollbar for Chrome, Safari, and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}

/* Hide scrollbar for IE, Edge, and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
}

::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #8f8e8e;
border-radius: 2px;
}

::-webkit-scrollbar-thumb {
background-color: #515151;
border-radius: 10px;
}

* {
--tw-ring-color: rgb(0 0 0 / 0) !important;
user-select: none;
}


Подробнее здесь: https://stackoverflow.com/questions/782 ... properties