Скрытый атрибут в Tailwindcss ⇐ CSS

[Гость]

Я попробовал добавить атрибут скрытый к некоторому содержимому панели навигации с помощью TailwindCSS. В теге я использовал hidden md:block, где контент должен отображаться, когда размер экрана достигает 768 пикселей и выше. но это не работает. Скорее, контент просто оставался скрытым. Как мне решить эту проблему?

Я пробовал использовать видимость, но это не работает так, как мне хотелось. Содержимое по-прежнему занимает это место, его просто не видно, и я думаю, что использование скрыто будет лучшим решением.

/** @type {import('tailwindcss').Config} */ модуль.экспорт = { режим: "джит", содержимое: ["./public/index.html"], тема: { продлевать: { цвета: { основной: "#ADEFD1", темно-синий: "#00203F", акцент: "#EFADCB", цвет: «rgb(205,205,205)», }, семейство шрифтов: { Электролиз: ["Электролиз"], }, dropShadow: { shadow1: "3px 5px 8px RGB(173,239,209, 1)", }, ключевые кадры: { покачиваться: { "0%": {transform: "translate(-25%)" }, "50%": { Transform: "translate(25%)" }, "100%": {transform: "translate(-25%)" }, }, покачивание1: { "0%": {transform: "translate(-25%)" }, "50%": { Transform: "translate(25%)" }, "100%": {transform: "translate(-25%)" }, }, покачивание2: { "0%": {transform: "translate(-25%)" }, "50%": { Transform: "translate(25%)" }, "100%": {transform: "translate(-25%)" }, }, повернуть: { "0%": {transform: "rotate(0deg)" }, "25%": {transform: "rotate(-30deg)" }, "75%": {transform: "rotate(30deg)" }, "100%": {transform: "rotate(0deg)" }, }, масштабировать: { 0: {transform: "scaleX(0%)" }, 100: {transform: "scaleX(100%)" }, }, подбросить: { от: { преобразование: "rotateX(-75deg)", непрозрачность: ".1", }, to: {transform: "rotateX(0deg)", непрозрачность: "1" }, }, слайдРайт: { от: { преобразование: "translateX(-30%)", непрозрачность: «0», }, к: { преобразование: "translateX(0%)", непрозрачность: «1», }, }, слайдЛевый: { от: { преобразование: "translateX(30%)", непрозрачность: «0», }, к: { преобразование: "translateX(0%)", непрозрачность: «1», }, }, DropIn: { от: { преобразование: "translateY(-60%)", непрозрачность: «0», }, к: { преобразование: "translateY(0%)", непрозрачность: «1», }, }, двигатьсяВверх: { от: { трансформировать: "translateY(60%)", непрозрачность: «0», }, к: { преобразование: "translateY(0%)", непрозрачность: «1», }, }, оборотная сторона: { от: { преобразование: "rotateY(80deg)", непрозрачность: «0», }, к: { преобразование: "rotateY(0deg)", непрозрачность: «1», }, }, }, анимация: { Wiggle: "Wiggle 7s easy-in-out бесконечен", Wiggle1: " Wiggle1 9s: бесконечность", Wiggle2: " Wiggle2 8s с бесконечной легкостью", Rotate: "поворачивать 5 секунд, легко входить и выходить бесконечно", ScaleIt: "scaleIt 10 секунд простоты", флип: "перевернуть 1с с легкостью вперед", SlideLeft: "slideLeft 1 с. легкое движение вперед", SlideRight: "slideRight 1 с легким движением вперед", dropIn: "dropIn 1s с легкостью вперед", FlipSide: "flipSide 2 легко выдвигается вперед", moveUp: "moveUp 3 секунды, легко выйти 3 секунды вперед", }, изображение на заднем плане: { кривая1: "url('./public/images/curve_left.png')", }, dropShadow: { "3xl": "0 5px 3px rgba(0,0,0,.5)", "4xl": ["0 3px 4px rgba(0,0,0,.5)", "0 -1px 4px rgba(0,0,0, .3)"], }, экраны: { перерыв2: "850 пикселей", перерыв1: "950 пикселей", }, }, }, плагины: [require("@kamona/tailwindcss-perspective")], }; Вот как выглядит моя конфигурация попутного ветра