I want x divs under each other with some height(e.g 1/2 of screenheight) but when I do that, the divs get 1/x height because it tries to fill the screen with x divs so it makes it smaller but I dont want that.

I’m trying to render the elements created by a post using draft-js, it’s a raw html. So far I could only do that using iframe, however, it doesn’t look good, and using dangerouslySetInnerHTML does not get right since it has the styles from the @base tailwind. So h1, h2, and many other tags doesn’t have it’s default style.

I can’t get scroll snapping to work with CSS and have tried multiple times and with tailwind as well and it just doesnt work. It kinda “buggyly” works on mobile devices.

enter image description here

I’m developing a component in React that accepts a color, a hex value as a string, and it should style various things inside my component, including states hover, before and after, focus, and in custom selectores as well.
In short, I need dynamic, arbitrary styling.
I’m well aware Tailwind does not support dynamic classes very well, but just so you know, if it did, some of my classes would look like:

How can I make the <h1> elements take on the next line if the width of the parent element becomes too small?

I’m working on the following AppSidebar() component using TailwindCSS.