Inflate Plugin for Children Padding - Tailwind CSS

Authored by @crswll

// Config
const inflatePlugin = function ({ addComponents, theme, variants, e }) {
  const spacing = theme('spacing', {})

  Object.entries(spacing).forEach(([name, padding]) => {
    addComponents(
      {
        [`.${e(`inflate-${name}`)} > *`]: { padding },
        [`.${e(`inflate-x-${name}`)} > *`]: { paddingLeft: padding, paddingRight: padding },
        [`.${e(`inflate-y-${name}`)} > *`]: { paddingTop: padding, paddingBottom: padding },
      },
      variants('inflate', ['responsive'])
    )
  })
}

module.exports = {
  mode: 'jit',
  plugins: [inflatePlugin],
}

// Example HTML
<div class="inflate-x-4 divide-x-4 divide-purple-300">
  <a href="#">This</a>
  <a href="#">That</a>
  <a href="#">Yup</a>
  <a href="#">One</a>
  <a href="#">More</a>
</div>