class does not exist when use @apply in config

[Jeeying]

Error

[Error - 6:42:27 PM] Tailwind CSS: <css input>:4:18: The `lg:-translate-y-16` class does not exist, but `lg-translate-y-16` does. If you're sure that `lg:-translate-y-16` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.
CssSyntaxError: <css input>:4:18: The `lg:-translate-y-16` class does not exist, but `lg-translate-y-16` does. If you're sure that `lg:-translate-y-16` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

File: tailwind.config.js

/* eslint-disable global-require */
const plugin = require('tailwindcss/plugin');

module.exports = {
  purge: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  darkMode: false,
  theme: {
    direction: ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'],
    extend: {},
  },
  variants: {
    extend: {
    },
  },
  plugins: [
    plugin(({ addComponents, theme }) => {
      const direction = theme('direction');
      direction.forEach((dir) => {
        addComponents({
          [`.bg-primary-gradient-to-${dir}`]: {
            [`@apply bg-gradient-to-${dir} from-gradient-purple via-gradient-pink to-gradient-orange`]: {},
          },
        });
      });

      addComponents({
        '.translate-to-head': {
          '@apply transform lg:-translate-y-16 -translate-y-8': {},
        },
      });
    }),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/forms'),
  ],
};

note:
It can be worked in webpack, but the plugin does not work

[bradlc]

Thanks for reporting! This should be fixed in v0.6.8 👍