Tailwindcss SCSS error @apply class does not exist issue

I recently upgraded to tailwind 2 and I made sure to follow the upgrade guide for laravel. I'm using SCSS in my project and all of the .scss files that I use the tailwind @apply in throw the following error.

For example:

ERROR in ./resources/assets/sass/app.scss (./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/src??postcss0!./node_modules/sass-loader/dist/cjs.js??ref--4-4!./resources/assets/sass/app.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(277:10) The `.bg-gray-400` class does not exist, but `bg-gray-400` does. If you're sure that `.bg-gray-400` 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.

  275 | 
  276 | .video-container {
> 277 |   @apply .bg-gray-400 .relative .w-full .h-0 .shadow;
      |          ^
  278 |   border: gray solid;
  279 |   padding-bottom: 42.25%;

The Tailwind classes work if I use them inline in the elements class=""

My main app.scss has the following import statements in it so I'm not sure what's wrong.

//tailwind
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";