Сохранять внутреннюю тень в контейнере ⇐ CSS

[Anonymous]

Я работаю над проектом реагирования с Tailwind CSS, где у меня есть блок div (с внутренней тенью), действующий как контейнер для прокручиваемой страницы. На странице есть элементы, которые при прокрутке прилипают к верху. Это влияет на внутреннюю тень контейнера. Я не могу изменить положение липких элементов, так как хочу, чтобы прокручиваемые элементы медленно исчезали. Я вставил фрагменты ниже. Заранее спасибо.
Блок контейнера div:

Прикрепленный блок:


Agent Hub


setSearchTerm(e.target.value)}
/>




Я пробовал вмешиваться в z-index, но это было бесполезно.
Изменить: я добавил свой конфигурацию попутного ветра и input.css ниже.
theme: {
extend: {
fontFamily: {
'silkscreen': 'Silkscreen',
},
boxShadow: {
'inner-dark': 'inset 0 4px 6px rgba(0, 0, 0, 0.1)',
'2xl-dark': '0 25px 25px rgba(0, 0, 0, 0.15)',
},
},
},

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
}


Подробнее здесь: https://stackoverflow.com/questions/791 ... -container