Closed 3 days ago.

I have a horizontally scrollable toolbar (overflow-x: scroll) with li items containing nested components. These components have position: absolute modals that should remain relative to their li parent. However, the horizontal scroll is clipping the modals, preventing them from overflowing vertically.

I need assistance in making the component within my grid sticky, i am using tailwindcss react/nextjs. The “back button” is just a button, the “footer” is just my name and the {children} element is a two screen tall wall of text.
Layout component, wrapping page.tsx:

I’m using self-end to align the delete button (trash can) horizontally with the inputs. But there’s a problem: when the error messages display, the delete button is misaligned again.

I’m trying to get the light blue div to take up the whole screen space, but it won’t. Additionally, the dark blue div shows even when no content is in it, but not the light blue one despite setting max-height (tried with min-height too)

I want to make text that changes its color in the middle of a word, in fact in the middle of a letter. I got it to work, but I also want to add a background color that changes in the same place. The issue is that I’ve used background image with a gradient to have the text colors change.

I have this example of a layout:

I have this unique problem with html tables.

Using tailwind, I have a div with class set to “overflow-auto”, and a table as its child. How can I make it so that the absolute div inside one of its cells extend beyond the overflowing div?