The space-x-4 class doesn't working correctly with the flex-wrap class

[buismaarten]

I want to try out the new space-x-4 class to prevent using the margin or padding technique. I also want to use the flex-wrap class to prevent columns going full width.

Sadly the result is not as I expected.

Example: https://codepen.io/buismaarten/pen/PoPRqdJ

[buismaarten]

Solved this problem by myself using:

• https://tailwindcss.com/docs/grid-template-columns
• https://tailwindcss.com/docs/gap

[frederikhors]

@buismaarten same problem here.

Is there a way to fix it without css-grid? Using flexbox?

[frederikhors]

Can you please remove the picked answer from this? Is not a proper "solution" to the problem.

[frederikhors]

No answer yet. This is a problem. I'll open an issue.

[frederikhors]

#1975

[hacknug]

Just use Ben's plugin or use paddings with negative margins: https://github.com/benface/tailwindcss-gap

[frederikhors]

@hacknug thanks! Here it is explained why using negative margins is wrong: #1584 (comment)

[hacknug]

Nah, nothing wrong with using CSS. Every approach has its drawbacks and its your job to understand how they all work.

[adamwathan]

Yep it's totally a fine solution (and the right solution when things need to wrap), just adds too much complexity for the 90% use case to be the default implementation IMO.

[Silberlachs]

a plugin? THIS is your solution?

[hacknug]

a plugin? THIS is your solution?

You can now use gap for this if you don't need to support old versions of browsers. Nothing wrong with using a plugin, that's what the plugin API is for… 🤷‍♂️

[Youniteus]

I ran into the same problem.

I was thinking about writing a plugin that adds classes like:

.flex-col-gap-4 {
  margin-left: -1rem;
  margin-right: -1rem;
  > * {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

[aeadedoyin]

What I do most times, is to use padding for the direct child div of the flexed(wrapped) parent, then have an inner div handle the content of each col.

div.flex.flex-wrap>
  div.md:col-6.p-4>
    div.bg-blue-500>  - content here
  div.md:col-6.p-4>
    div.bg-gray-500>  - content here

For the col-* here's the plugin I use:
https://github.com/karolis-sh/tailwind-bootstrap-grid

[Silberlachs]

i ended up using an invisible character alt+255
now i'm waiting until my markup blows up