How use @apply in other Scss files with tailwind

Question

I'm using Tailwind and I try to use @apply on a scss file but vscode tells me "Unknown at rules @apply", I show you my App.css file and my css config, I read the tailwind doc about @Apply but I don't know, I must have missed something

App.css :

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "./unreset.scss";

A part of my scss :

.unreset {
    a {
      @apply text-blue-700 underline;
    }
    p {
      @apply my-4;
    }
  
    blockquote,
    figure {
      @apply my-4 mx-10;
    }
  
    hr {
      @apply border;
    }
  
    h1 {
      @apply text-4xl font-bold my-2;
    }
  
    h2 {
      @apply text-2xl font-bold my-3;
    }
  
    h3 {
      @apply text-lg font-bold my-4;
    }
  
    h4 {
      @apply text-base font-bold my-5;
    }
  
    h5 {
      @apply text-sm font-bold my-6;
    }
  
    h6 {
      @apply text-xs font-bold my-10;
    }
}

postcss.config.js :

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting')(require('postcss-nesting')),
    require('tailwindcss'),
    require('postcss-preset-env')({
      features: { 'nesting-rules': false }
    }),
  ]
}

here you go, I don't have any problems compiling, just in my inspector the code is not compiled properly because of @apply. Thanks in advance for your help

Answer 1

There might be 2 issues:

1. Instead of importing @import "./unreset.scss"; try @import "unreset";.
2. In postcss.config.js, export plugins config as object instead of array.

module.exports = {
    plugins: {
        'postcss-import': {},
        'tailwindcss': {},
        'tailwindcss/nesting': {},
        'autoprefixer': {},
    }
};