Suggestion: Use Tailwind's "space between" utility instead of negative margins

[htunnicliff]

In Tutorial II: Multiple Comments, the following code sample is provided illustrating components that are spaced apart. The technique used does work, but since Tailwind CSS is being used as the styling solution, it might be helpful to take advantage of the space between utility.

Here is the code as provided:

// web/src/components/CommentsCell/CommentsCell.js

export const Success = ({ comments }) => {
  return (
    <div className="-mt-8">
      {comments.map((comment) => (
        <div key={comment.id} className="mt-8">
          <Comment comment={comment} />
        </div>
      ))}
    </div>  
  )
}

And here is what this code would look like if the space between utility was used:

// web/src/components/CommentsCell/CommentsCell.js

export const Success = ({ comments }) => {
  return (
    <div className="space-y-8">
      {comments.map((comment) => (
        <div key={comment.id}>
          <Comment comment={comment} />
        </div>
      ))}
    </div>  
  )
}

For context, here is the CSS used for the class .space-y-8:

& > * + * {
  margin-top: 2rem;
}

---

I would be happy to put a PR together for this if desired!

[clairefro]

Thanks! @cannikin - thoughts?

[cannikin]

Huh...I've been using Tailwind for years and didn't even realize this existed! If you don't mind putting together a PR that'd be great. I could have sworn I had a little description text explaining why there's a negative margin there, but I can't find it now. But I'd want to see a sentence or two just explaining what that utility is doing since the whole purpose of this section is getting the layout to look good. I tend to avoid the "just copy and paste this, don't worry about it" method of teaching and would rather explain what's going on, especially if this is someone unfamiliar with Tailwind. Thanks!

[Isaac-Tait]

@clairefro What can I do to help with this?

[cannikin]

I'm updating the tutorials to be compatible with Redwood v1.0 so I'll look into integrating this suggestion at the same time!