-

[aparajita]

No description provided.

[hacknug]

I think this would fit better as at-rules since I usually find myself writing this kinds of things outside my config file. I like the idea of introducing something like spacing to be able to share the same spacing values between margins (both positive and negative) and paddings (à la Tachyons) but I'm not sure most people would want this if it hasn't been yet discussed or PR'd (not sure about this though).

Also not sure if you made a mistake here or I simply don't understand how toggling between first/last would work: So .spaced-r-4 would put .mr-4 margin on all but the last child. .spaced-ml-4 would leave margin off the first child.

Just my two cents. Looking forward to everyone else's opinion on this. Somewhat related to this (media queries and pseudo selectors) #313 #355.

[denjaland]

Interesting thought. I find myself constantly adding conditional classes in VueJS.

[hacknug]

The config file defines the available spacing, the same way margin and padding is defined. There will be a set of defaults that mirror the margins. Unless the defaults don't cover your needs, you won't have to configure anything.

What I meant is that I don't see why should we add this and only use it to add margins to child elements. I feel this would be much more useful as at-rules to use with pseudo-selectors to @apply any class to those elements.

Together with @responsive we would be able to create all kinds of things that would only apply to some breakpoints which imho is one of the main issues Tailwind should try to tackle next.

Correct. If you're stacking vertically, spaced-b-4 would leave margin off the last child, spaced-t-4 the first child.

Again, I still don't understand how spaced-b-4 and spaced-t-4 indicate they would exclude their first/last child respectively. The only difference between each other is the b/t part of the class name which to me stand for bottom/top and don't tell me anything about targeting the first/last child.

I would probably go for something more like .child-not-last:mr-8 or .child-not-first:mr-8 in this case but what I'd really like to be able to do is create all kinds of classes for every pseudo selector in a standardized way.

[adamwathan]

I think the most "Tailwind" way to handle this would be adding new prefixes for targeting children like @hacknug mentioned. I'd probably want it to work like this:

<div class="children:mb-4 last-child:mb-0">
  ...
</div>

I'm still trying to get over my fear of bloating the living hell out of the CSS so I'm hesitant to add this right now, but I do like the idea. The main question I have with this stuff is how it all plays with other state variants. Do we need to support hover:children:mb-4 for example? Gets tricky to decide how far to go.

Regarding the spaced-b-4 style approach; I think if I was going to create classes like that in a project they'd look like this:

.spaced-y-4 {
  margin-bottom: 1rem;
  &:last-child {
    margin-bottom: 0;
  }
}

.spaced-x-4 {
  margin-right: 1rem;
  &:last-child {
    margin-right: 0;
  }
}

...instead of having specific versions for top, bottom, left, and right. Seems like just an implementation detail of what you're really trying to do which is either "space these items vertically" or "space these items horizontally".

[benface]

Thought on this: the Flexbox Level 2 Spec will bring Grid’s gap properties to Flexbox, which will make this problem much easier to solve: w3c/csswg-drafts#592. When we’ll see this in browsers is anybody’s guess, but I’m pretty excited about it.

[benface]

@aparajita What happened? Why did you remove all your issues/comments from this repo?