@tailwindvue/direct-children-plugin v1.0.0

Direct Children Variant Plugin for Tailwind CSS

Requirements

This plugin was created for and tested with Tailwind CCS v1.2.0 and greater.

Usage

First add the plugin to your tailwind.config.js file:

plugins: [
  require('@tailwindvue/direct-children-plugin')
]

Then add the variant to the utilities you want to use the plugin for.

variants: {
  margin: ['direct-children', 'default', 'responsive']
}

Make sure to add the direct-children variant before other variants and don't forget to add the default variant too.

You can now use this variant in your markup:

<div class="direct-children:mb-4">
    <div>One</div>
    <div>Two</div>
</div>