tailwind children variants

talwind.config.js

module.exports = {
  variants: {
    margin: ['responsive', 'children', 'not-first', 'not-last'],
    padding: ['responsive', 'children', 'not-first', 'not-last'],
    borderWidth: ['responsive', 'children', 'not-first', 'not-last']
  },
  plugins: [
    /**
     *
     * Usage example for children variants
     *
     *  <div className='children:pl-4 not-first:pt-8 not-last:border-b'>
     *    {['a', 'b', 'c'].map(x => (
     *      <h1>{x}</h1>
     *    ))}
     *  </div>
     *
     */
    function({ addVariant, e }) {
      addVariant('children', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`children${separator}${className}`)} >*`
        })
      })
      addVariant('not-first', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`not-first${separator}${className}`)} >*:not(:first-child)`
        })
      })
      addVariant('not-last', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`not-last${separator}${className}`)} >*:not(:last-child)`
        })
      })
    }
  ],
  important: true
}