w-full in small screen applied but in “sm” the w-1/2 not applied it need the !important but i am very confused that how to give it.

I wanted to build a semi-circle donut shape chart using React JS and tailwind CSS as shown in the picture below how to create this type of circle which looks like a semi-circle and has a different color of arrow-like box containing and is separated equally in this container. and this could not be affected by any screen of the website. How do you create this design with the help of React JS and Tailwind CSS?

So I have this project where I have a page with a header and then a table.

I cannot seem to have just the x-axis scroll on. When I use overflow-x-auto, I get the desired affect for the x-axis, but the y-axis gets one too.

I’m encountering two problems that I can’t solve.
I have a card that has some texts on it.

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