Hello again!
I`ve got a sliding card thing going on. It works well however when I add drop shadow to it I get really bad performance issues. I had .featureCard then I added drop shadow ontop of it with tailwind. Thinking that mixing these was causing performance issues I tried copying what tailwind was generating directly onto the css component. I don`t mind not using the drop shadow I was just wondering why it might be causing the frame issues.
I`m also using Nuxt.
.featureCard {
--tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
--spacing: 6rem;
position: relative;
width: 90vw;
height: calc(100vh - var(--spacing) * 3);
top: var(--spacing);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 30px;
border-radius: 50px;
background-color: #292524;
border: solid 2px #57534e;
z-index: 3;
padding: 2rem;
}