.space-* children margin override

[SpadarShut]

I'm using the .space-x-4 class and want to override a margin for one of the children. However, the selector is very specific and .mr class gets overridden.

So why does the selector needs to be so specific?

.space-x-2 > :not(template) ~ :not(template)

instead of

.space-x-2 > * ~ *

If it's possible to change the specificity and also generate .m* classes after .space* classes, then overriding would work.

Can this be implemented?

[adamwathan]

The rationale for the current selector is explained here:

#1584

I have some ideas on solving the specificity battles in other ways in the future (b5d4724 👀 ), but in the mean time I would recommend using an alternate solution if you need to override the margin for one element.

Usually the right solution is to use multiple "stacks":

<!-- Don't do this -->
<div class="space-y-4">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div class="mt-8">1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- Do this instead -->
<div class="space-y-8">
  <div class="space-y-4">
    <div>A</div>
    <div>B</div>
    <div>C</div>
  </div>
  <div class="space-y-4">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

[SpadarShut]

If it's worth the effort now, maybe there could be an option to generate the classes with a customized selector?

Also, the use of CSS custom props breaks support for IE11 which I happen to need currently :). Can we make it support IE please?

[adamwathan]

You can use the postcss-custom-properties plugin to polyfill support for IE11 (it'll just break the reverse utilities), or alternatively you could just write your own plugin and disable the built in ones:

module.exports = {
  corePlugins: {
    space: false,
  },
  plugins: [
    function({ addUtilities, theme, e, variants }) {
      const spaceX = Object.fromEntries(
        Object.entries(theme('space')).map(([k, v]) => [
          `.${e(`space-x-${k}`)} > * + *`,
          { marginLeft: v },
        ])
      )
      const spaceY = Object.fromEntries(
        Object.entries(theme('space')).map(([k, v]) => [
          `.${e(`space-y-${k}`)} > * + *`,
          { marginTop: v },
        ])
      )
      addUtilities(
        {
          ...spaceX,
          ...spaceY,
        },
        variants('space')
      )
    }
  ]
}

[SpadarShut]

Got it, thanks for helping out!

[ArnaudBarre]

or alternatively you could just write your own plugin and disable the built in ones

Thanks for the idea! But the issue is that the plugin is generated after core ones, so the override still not works. I use the hack of putting it as a component, but I lost the variant part.The solution will be to implement this feature request. Not important for now, but if I need it in the future, would a PR for that be welcomed?

[scofennell]

The rationale for the current selector is explained here:

#1584

I have some ideas on solving the specificity battles in other ways in the future (b5d4724 👀 ), but in the mean time I would recommend using an alternate solution if you need to override the margin for one element.

Usually the right solution is to use multiple "stacks":

<!-- Don't do this -->
<div class="space-y-4">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div class="mt-8">1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- Do this instead -->
<div class="space-y-8">
  <div class="space-y-4">
    <div>A</div>
    <div>B</div>
    <div>C</div>
  </div>
  <div class="space-y-4">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

This is tough to do in a situation like WordPress post content. It's already a bear to inject CSS classes into Gutenberg blocks. Injecting wrappers like this would be bonkers, when something like mt-10 seems like it "should" work to override something like space-y-5.

[Paul-Hebert]

@adamwathan the rationale you outlined makes sense, but I agree that it feels like margin utilities should override space utilities.

Could :where be used to reduce the specificity of the spacing selector?

[wongjn]

Yep, that's what happens in v4 now: https://play.tailwindcss.com/JKe9PaTtnt

[Paul-Hebert]

Oh nice, thanks! Looks like I need to upgrade :)