[typhoon] [question] Tailwind CSS - flex-no-wrap is not applied correctly in modular/image-block.html.twig

[sebastian0119]

Hi there,

I am using Grav 8.1.12 with the latest Typhoon theme.

I am trying to adjust the modular/image-block.html.twig template, which originally looks like that (extract):

<div class="flex {{ align_right ? 'md:flex-row-reverse' : '' }} justify-center md:justify-start flex-wrap md:flex-no-wrap">
    {% if image %}
      <div class="w-full md:w-1/2 {{ align_right ? 'md:pl-8': 'md:pr-8' }} {{ page.header.image_classes }}">
        <img class="mb-8 md:mb-0 rounded-md" alt="{{ image }}" src="{{ image }}">
      </div>
    {% endif %}
    <div class="w-full md:w-1/2 {{ align_right ? 'md:pr-8': 'md:pl-8' }} md:pr-8 mb-4 md:mb-0">

      {% if page.content %}
        <div class="md:text-lg prose">
          {{ page.content|raw }}
        </div>
      {% endif %}
</div>

In my interpretation, it should not wrap flex items for medium screen and larger (flex-wrap md:flex-no-wrap on the parent div).

But when I try to change the width of image and content from md:w-1/2 (each) to md:w-2/3 for the image and md:w-1/3 for the content, these two items do get wrapped.

If you consider that this issues is more an issue of Tailwind and not so much of Grav + Typhoon, please feel free to close this issue.

Thanks, Sebastian

[rhukster]

You need to make sure you are recompiling Tailwind CSS when you make changes that are using a new class. This is because Tailiwind rebuilds the CSS to use ONLY the CSS you are using. It doesn't include everything by default.

The docs have some instructions on how to get this 'watching' for changes: https://getgrav.org/premium/typhoon/docs#developing-custom-css