First child of a grid not padded the same as the others

[James-E-A]

I've got a list I'd like to render as a grid with padding between the items whenever the browser has CSS enabled.

Tailwind mostly works for this, except that it's applying the padding with this bizarre generated rule which excludes the first grid element:

main .widget_resources > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

so I end up with a bunch of nicely spaced elements, except for the top-left one, which is swollen and expanding out of the top and left compared to its siblings.

Going in and surgically removing the ~ not([hidden]) from the selector simply fixes this, but my problem is I don't know how to do that from the Tailwind end of things.

---

Here's my application CSS:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

main .widget_resources {
  @apply
    tw-grid
    tw-space-x-3
    tw-space-y-3
  ;
}

main .widget_resources > .resource {
  @apply
    tw-rounded
    tw-relative
  ;
}

main .widget_resources .status-green {
    background: green;
}

main .widget_resources .status-green-with-exception {
    background: linear-gradient(120deg, green, green, yellow, yellow, yellow);
}

main .widget_resources .status-red {
  background: red;
}

main .widget_resources .admin {
  @apply
    tw-absolute
    tw-bottom-0
  ;
}

main .widget_resources .admin .hint {
  @apply tw-hidden;
}

main .widget_resources > .resource:not(:hover) .admin {
  @apply tw-invisible;
}

/* https://tailwindcss.com/docs/content-configuration#dynamic-class-names */
/* FIXME why does this break when I try to wrap it in @layer utilities ??? */
.x-grid-cols-1 { @apply tw-grid-cols-1; }
.x-grid-cols-2 { @apply tw-grid-cols-2; }
.x-grid-cols-3 { @apply tw-grid-cols-3; }
.x-grid-cols-4 { @apply tw-grid-cols-4; }
.x-grid-cols-5 { @apply tw-grid-cols-5; }
.x-grid-cols-6 { @apply tw-grid-cols-6; }
.x-grid-cols-7 { @apply tw-grid-cols-7; }

and here's the component I'm using for the resources:

<ul class={["widget_resources", "x-grid-cols-#{ceil(:math.sqrt(Enum.count(@resources)))}"]}>
  <li :for={resource <- @resources}
    class={["resource", "status-#{resource.status}"]}
  >
    <p><%= resource.name %>: <strong><%= status_gettext(resource.status) %></strong></p>
    <div :if={@is_director} class="admin"><span class="hint"><%= gettext("Set status") %>: </span><button :for={status <- ["green", "green-with-exception", "red"]}
      phx-click="set_resource_status",
      phx-value-target={resource.name},
      value={status}
      class={["status-#{status}"]}
    ><%= status_gettext(status) %></button></div>
  </li>
</ul>

Seems to be the same issue as #7119 (unanswered, from 2022)

[wongjn]

The space-* utilities apply margin to all but the first element. Since you're using CSS grid, you're better off using gap-: https://play.tailwindcss.com/MY5Xu3Owts?file=css

---

As an aside, you may also wish to avoid @apply altogether as recommended by Adam Wathan, creator of Tailwind:

• https://twitter.com/adamwathan/status/1226511611592085504

  Confession: The apply feature in Tailwind basically only exists to trick people who are put off by long lists of classes into trying the framework.

  You should almost never use it 😬

  Reuse your utility-littered HTML instead.

• https://twitter.com/adamwathan/status/1559250403547652097

  I can say with absolute certainty that if I started Tailwind CSS over from scratch, there would be no @​apply 😬

  The behavior is outrageously complicated, everyone struggles to build the right mental model of what it's supposed to do, and it encourages bad CSS architecture.

[James-E-A]

The space-* utilities apply margin to all but the first element. Since you're using CSS grid, you're better off using gap-

Aha, that was exactly the thing I was getting wrong. That solved it. Thank you for the pointer!

---

The behavior [of @apply] is outrageously complicated, everyone struggles to build the right mental model of what it's supposed to do, and it encourages bad CSS architecture.

Hmm, I found it to be the perfect tool for allowing me to build a very clean separation between Tailwind and my own application's semantic DOM, so that all the Tailwind "vendor lock" in my codebase is "quarantined" into a single CSS file that adapts between them; if I ever need to switch away from Tailwind, I won't have to re-build every piece of the app, I'll just have to replace that single CSS file, since I won't have woven couplings to its tooling into every crevice of my UI codebase.

I wonder if this is the "right mental model of what it's supposed to do", or if I've set myself up with "bad CSS architecture" that will come back to bite me somehow.

[devlzcode]

I don't really understand what you gain from using tailwind with @apply instead of just writing the css yourself