Replies: 3 comments
-
I learned that this approach can cause horizontal scrollbars to appear. In this Twitter thread (https://twitter.com/devongovett/status/1244679626162450432) learned from here (https://twitter.com/PetrOdut/status/1249264386943975426) that only using plugin(({ addUtilities, e, theme, variants }) => {
Object.entries(theme('gap')).forEach(([key, value]) =>
addUtilities(
{
[`.flex-gap-${e(key)}`]: {
marginTop: `-${half(value)}`,
marginLeft: `-${half(value)}`,
'& > *': {
marginTop: half(value),
marginLeft: half(value)
}
}
},
variants('gap')
)
)
}) |
Beta Was this translation helpful? Give feedback.
-
I think this is a great candidate for a third party plugin but I don't think it's a great fit for core, I try not to add stuff that will be made obsolete by browser features and would require a breaking change to remove. That's why the aspect ratio stuff is in a plugin instead of in core for example 👍🏻 |
Beta Was this translation helpful? Give feedback.
-
The margin plugin approach is problematic when you have nested |
Beta Was this translation helpful? Give feedback.
-
The
gap
property is very convenient to work with for grids. Unfortunately, browser support for the same property in flexbox contexts isn't quite there yet:However, negative margins can be used for simulating the same behavior. It's a bit tedious to do right and every spacing gets doubled between elements:
With a custom Tailwind plugin,
flex-gap
,flex-gap-x
andflex-gap-y
utilities could be added, replicating the behavior of gaps as specified in grids:The HTML example above could be simplified into:
The best part is that all of the 'flex-gap' utilities may be replaced with just 'gap', once supported natively by the targeted browsers.
Beta Was this translation helpful? Give feedback.
All reactions