Are you referring to the vertical alignment of the text not working?
I looked at the project and was able to get the first table to work by placing the text within a FLEX component, as it has controls that allow you to center both vertically and horizontally, as you have done in the second example with the container.
NOTE: I also removed the background color you were setting on the text and used the background of the flex for the colors.
The problem is that there is no VERTICAL text alignment, so using a text block on its own will not get you the vertical alignment. From what I can tell, Tailwind does not appear to have vertical alignment for text.
No, I put each of the text blocks in a flex and left them all in the existing grid as you had originally laid it out.
Unfortunately, I deleted the project so I can’t send a screenshot.
There are a number of ways this can be accomplished using a flex box. You could use them to create “rows”, or “columns”. I just tried to use what you had and leveraged the Flex to control the layout of the text block.
@upssjw that was exactly the starting point for my struggle with the text component
that was my starting set-up. with this setting, the text alignment fits, but the height of the background was no longer correct - hence the stretch setting.
i could then adjust the height of the background with a container or flex. but that was too much unnecessary code for me at this point.
the css classes for the text component are the best solution at the moment. it would of course be nice to be able to make the setting directly in the text component … it’s actually a niche problem but annoying if you don’t know how to solve it. ^^
