Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save dingman/453e54876ca8d17bb85508289e1ca4be to your computer and use it in GitHub Desktop.
Save dingman/453e54876ca8d17bb85508289e1ca4be to your computer and use it in GitHub Desktop.
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment