为什么在带有尾风的nuxtjs应用程序中，我得到的错误@apply` `不能与. .xl\:w-8\/12一起使用？

Question

我有nuxtjs应用程序，在安装过程中选择了tailwindcss，并试图从laravel 8/末风class 2应用程序中添加自定义类，我得到了错误：

 ERROR  Failed to compile with 1 errors                                                                                                                                                                            friendly-errors 08:04:33


 ERROR  in ./assets/css/style.css                                                                                                                                                                                  friendly-errors 08:04:33

Syntax Error: SyntaxError                                                                                                                                                                                          friendly-errors 08:04:33

(42:9) `@apply` cannot be used with .xl\:w-8\/12 because .xl\:w-8\/12 is nested inside of an at-rule (@media).

  40 |     /*profile_page_container*/
  41 |     .profile_page_container_wrapper {
> 42 |         @apply flex-1 app_main_color border-2 border-green-500 rounded-lg w-full xl:w-8/12 m-0 p-1;
     |         ^
  43 |     }
  44 | 


                                                                                                                                                                                                                   friendly-errors 08:04:33
 @ ./assets/css/style.css 4:14-163 15:3-20:5 16:22-171
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

在assets/css/style.css中，我添加了以下几行：

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


@layer base {
  .d1 {
    @apply border-2 border-red-600;
  }

  h3 {
    @apply text-xl font-bold app_main_color;
    padding: 4px;
  }

  h4 {
    @apply text-lg font-bold app_main_color;
    padding: 3px;
  }

  /* error at line below shows at xl\:w-8 */
  .profile_page_container_wrapper {
    @apply flex-1 app_main_color border-2 border-green-500 rounded-lg w-full xl:w-8/12 m-0 p-1;
  }
}

在nuxt.config.js中，我有以下内容：

buildModules: ['@nuxtjs/tailwindcss'],
css: [
  {
    src: '~assets/css/style.css',
    lang: 'css'
  }
],

我看到我的自定义类被应用在我的应用程序ok中。

怎么才能修好？

Answer 1

@apply不能与响应类一起使用；您可以使用@screen指令来达到预期的结果：

@screen xl {
    .profile_page_container_wrapper {
        @apply w-8/12;
    }
}

有关更多信息，您可以看到以下链接：

@apply不能与响应类一起使用？

顺风CSS @apply指令