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

Line-wrapped / nested elements don't behave as expected #150

Closed AdamGaskins closed 2 years ago

AdamGaskins commented 2 years ago

Would like to use in a few more advanced scenarios, but there's a few cases where line-wrapping and nesting elements cause different behaviors from what I'd expect in HTML:

Line automatically wrapping example

<div class="m-1 p-1 bg-gray w-35">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</div>

image

Nested elements with padding example

<div class="w-64 bg-gray p-1">
    <span class="w-1/2 bg-red mr-1 p-1">
        Left
    </span>

    <span class="w-1/2 bg-red p-1">
        Right
    </span>
</div>

image

Thanks again for this project!

xiCO2k commented 2 years ago

Hey @AdamGaskins

We are aware of that case on the multi line text wrap, right now we act as whitespace-nowrap by default, would love to review a PR with the other whitespace classes available 😎.

For that drop on the Left and Right Example I think is the margin on the first element, for that you can use flex on the parent div and then use flex-1 on each elem.

Thanks.