benface / tailwindcss-gap Goto Github PK

Instead of the current hack.

It won't use custom properties. The output will probably be twice as big, but that's a relatively small price to pay for IE support.

Is there a trick here to be able to use with postcss + @apply?

@apply flex c-gap c-gap-8

And remove the legacy option.

Wanted to hear your thoughts on adding this. I always use those values and this change would at least save me 30 seconds every time I use your plugin.

Do you also use the same values most of the time? If not any reason not to I'm missing like I usually do? lol

Because of these two cases:

• collapsible margins, e.g.:

  <div class="gap-y-20">
      <p>...</p>
      <p>...</p>
      <!-- the vertical gap is actually 10px -- >
  </div>
  

• columns defined in percentage, e.g.:

  <div class="gap-x-20">
      <div class="w-1/2">...</div>
      <div class="w-1/2">...</div>
      <!-- the two columns don't fit on one line -- >
  </div>
  

On the other hand, if changed this might now be unexpected:

<div class="gap-20">
    <div class="w-40 h-40 bg-red">...</div>
    <div class="w-40 h-40 bg-red">...</div>
    <!-- there is no gap between the two red squares, and they have inner padding -->
</div>

Ugh.

Hello, I noticed that nested gaps does not work.
PUG CODE:

.flex.flex-column.gap.gap-y-2
 .flex.gap.gap-x-2
     span Hello
     span Hello
     span Hello
 .flex.gap.gap-x-2
     span Hello
     span Hello
     span Hello
 .flex.gap.gap-x-2
     span Hello
     span Hello
     span Hello

This code only apply one margin.

There should be a gap-none utility to remove any gap on larger screens, e.g.:

<div class="flex gap gap-x-20 sm:gap-none">
    ...
</div>

I guess the current version 7.0.0 is not compatible with the latest Tailwind CSS 2.0.1.

I get the following error:

TypeError: target is not a function
    at c:\Users\user\source\repos\project\node_modules\tailwindcss-gap\index.js:20:18
    at c:\Users\user\source\repos\project\node_modules\tailwindcss\lib\util\processPlugins.js:69:5