Question 237887 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Add spacing in between items with css tailwind classes

I have defined a JSX component in a react application that retrives comments to be dislayed on the screen I works just fine it is just that there’s no y space and I am using tailwind css classes for styling for it but i can’t seen to change it

    <div className="mr-40 ml-40" >
        {comments.length > 0 && (
        <div className="bg-slate-600 shadow-lg rounded-lg space-y-4 ">
          <h3>
            {comments.map((comment) => (
              <div key={comment.createdAt} className="border-b border-gray-100 py-2 space-x-2 ">
                <div className="flex justify-between items-center   ">
                  <div className="flex justify-between items-center mt-2 ">
                    <h3 className="text-black ml-2 ">{toUpper(comment.name)}</h3>
                    <h4 className="text-gray-500 ml-10">{formatDate(comment.createdAt)}</h4>
                  </div>
                </div>
                <p className="text-gray-500 dark:text-gray-400">{comment.comment}</p>
              </div>
            ))}
          </h3>
        </div>
      )}
    </div>

I’ve tried adding space-y in this line <div className="bg-slate-600 shadow-lg rounded-lg space-y-4">.
What should I modify to create that space in between my comments?

Tags:

2

Answers


  1. 0

    You’d add space-y-4 to the <h3> element wrapping the list of comments since space-y-4 adds margins to its direct children:

    <h3 className="space-y-4">
  {comments.map((comment) => (
    …
    Login or Signup to reply.
  2. 0

    It seems like you’re trying to add vertical spacing between the comments displayed in your React component. The space-y class in Tailwind CSS should work for this purpose. However, it looks like you’ve applied the space-y class to the wrong element. In your code, you’ve applied it to the wrapping div around the entire comment section, but it should be applied to the container that holds each individual comment.

    By applying the space-y-4 class to the div with the comments.map function, you’re ensuring that there’s vertical spacing of 1rem (which is the default spacing) between each comment. You can adjust the space-y value to achieve your desired spacing.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search