如何使用 @apply 在其他 Scss 文件中使用 tailwind

Question

我正在使用 Tailwind，我尝试在 scss 文件上使用 @apply，但是 vscode 告诉我“@apply 规则未知”，我给你看我的 App.css文件和我的 css 配置，我阅读了有关 @Apply 的 tailwind 文档，但我不知道，我一定错过了一些东西

App.css :

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

@import "./unreset.scss";

我的一部分css :

.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 }
    }),
  ]
}

好了，我的编译没有任何问题，只是在我的检查器中，由于@apply，代码没有正确编译。预先感谢您的帮助

Answer 1

可能有 2 个问题：

而不是导入 @import "./unreset.scss"; 尝试 @import "unreset";.
在 postcss.config.js 中，将插件配置导出为对象而不是数组。

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

如何使用 @apply 在其他 Scss 文件中使用 tailwind

How use @apply in other Scss files with tailwind

sass

reactjs

postcss

tailwind-css