Cant add utilities via plugins[Variant cannot be generated because selector contains no classes]

[roynes]

I was creating a custom utilities named position-top:

The code being:

const _ = require('lodash')

module.exports = function ({ remsRange = _.range(1, 12), variants = ['responsive']}) {
  return function ({ e, addUtilities }) {
    addUtilities([
      ...remsRange.map(theRange => ({
        [`.top-${theRange}`]: {
          top: `${theRange}rem`
        }
      }))
    ])
  }
}

and required it in the plugins section of tailwind.js as I saved it. VUE CLI raises an error

Module build failed (from ./node_modules/postcss-loader/lib/index.js): Syntax Error

(44:1) Variant cannot be generated because selector contains no classes.

42 | @import "tailwindcss/utilities"; 43 | / 44 | @tailwind utilities; 45 | /* 46 | Here you would add any custom utilities you need that don't come out of the

@ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader??ref--8-oneOf-1->1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref->-8-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!./node_modules/cache->loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?>vue&type=style&index=0&lang=scss& 4:14-415 14:3-18:5 15:22-423 @ ./src/App.vue?vue&type=style&index=0&lang=scss& @ ./src/App.vue @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.1.13:8080/sockjs-node (webpack)/hot/dev-server.js >./src/main.js

Is there any thing that I missed before adding the utilities?

[iraklisg]

I cannot reproduce the error. Using the code above the classes are generated without errors...

However, the Variant cannot be generated because selector contains no classes error may occur:

• because of an invalid class name (e.g '.foo,bar' class name contains the invalid character ,)
• because the custom class name does not begin with a dot . (e.g foo instead of .foo)