search

nunomaduro / termwind

🍃 In short, it's like Tailwind CSS, but for the PHP command-line applications.
MIT License
2.27k stars 76 forks source link

Flex with padding #157

Closed jkniest closed 1 year ago

jkniest commented 1 year ago

Heyho,

when using flex to render columns besided each other and then applying padding to each of the boxes causes a weird result.

Working, without padding

        render(<<<HTML
            <div class="flex mt-1 justify-evenly">
                <span class="flex-1 bg-green-100">
                    Today:
                </span>
                <span class="flex-1 bg-green-200">
                    Tomorrow:
                </span>
            </div>
        HTML);

CleanShot 2022-11-20 at 02 41 23

But when applying padding to the boxes they are not properly aligned anymore:

        render(<<<HTML
            <div class="flex mt-1 justify-evenly">
                <span class="flex-1 bg-green-100 p-1">
                    Today:
                </span>
                <span class="flex-1 bg-green-200 p-1">
                    Tomorrow:
                </span>
            </div>
        HTML);

CleanShot 2022-11-20 at 02 41 34

Did I something wrong? I will try to look into the library to figure it out, but maybe I'm just using it wrong 😅 Thanks for the awesome library!

xiCO2k commented 1 year ago

Hey @jkniest I think if you go with just px-1 it should work, multi line flex is not yet supported :(