tailwind css next-sibling margin

generated.css

...
.-ml-px {
  margin-left: -1px;
}
.child-siblings\:m-0 > * + * {
  margin: 0;
}
.child-siblings\:m-1 > * + * {
  margin: 0.25rem;
}
.child-siblings\:m-2 > * + * {
  margin: 0.5rem;
}
...

...
@media (min-width: 640px) {
  .sm\:-ml-px {
    margin-left: -1px;
  }
  .sm\:child-siblings\:m-0 > * + * {
    margin: 0;
  }
  .sm\:child-siblings\:m-1 > * + * {
    margin: 0.25rem;
  }
  .sm\:child-siblings\:m-2 > * + * {
    margin: 0.5rem;
  }
...
}
...

tailwind.config.js

const plugin = require('tailwindcss/plugin')

module.exports = {
  theme: {
    extend: {}
  },
  variants: {
    margin: ['responsive', 'child-siblings']
  },
  plugins: [
    require('@tailwindcss/custom-forms'),
    plugin(function({ addVariant, e }) {
      addVariant('child-siblings', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`child-siblings${separator}${className}`)} > * + *`
        })
      })
    })
  ]
}