plugin.js

let postcss = require('postcss')
let postcssNested = require('postcss-nested')

module.exports = function nesting(opts = postcssNested) {
  return (root, result) => {
    root.walkAtRules('screen', (rule) => {
      rule.name = 'media'
      rule.params = `screen(${rule.params})`
    })

    root.walkAtRules('apply', (rule) => {
      rule.before(postcss.decl({ prop: '__apply', value: rule.params, source: rule.source }))
      rule.remove()
    })

    let plugin = (() => {
      if (
        typeof opts === 'function' ||
        (typeof opts === 'object' && opts.hasOwnProperty('postcssPlugin'))
      ) {
        return opts
      }

      if (typeof opts === 'string') {
        return require(opts)
      }

      if (Object.keys(opts).length <= 0) {
        return postcssNested
      }

      throw new Error('tailwindcss/nesting should be loaded with a nesting plugin.')
    })()

    postcss([plugin]).process(root, result.opts).sync()

    root.walkDecls('__apply', (decl) => {
      decl.before(postcss.atRule({ name: 'apply', params: decl.value, source: decl.source }))
      decl.remove()
    })

    return root
  }
}