在Next.js的CSS模块中使用tailwind @apply

Question

根据官方指南，我在Next.js网站上设置了顺风：https://github.com/tailwindcss/setup-examples/tree/master/examples/nextjs

但是，当我尝试使用@apply方法时，在CSS module on a component level中，例如：

.container {
  @apply rows-span-3;
}

我收到以下错误：

语法错误：@apply不能与.rows-span-3一起使用，因为找不到.rows-span-3，或者它的实际定义包括伪选择器，如：hover，：active等。如果您确定[C0 ]存在，请确保正确处理所有.rows-span-3语句之前 Tailwind CSS会看到您的CSS，因为@import仅可用于同一CSS树中的类。

这是我的@apply：

postcss.config.js

Answer 1

我遵循了示例，并且使用@js与nextjs css模块一起工作

const purgecss = [
  '@fullhuman/postcss-purgecss',
  {
    content: ['./components/**/*.jsx', './pages/**/*.jsx'],
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
  },
]

module.exports = {
  plugins: [
    'postcss-flexbugs-fixes',
    'postcss-import',
    'postcss-mixins',
    'postcss-calc',
    'postcss-extend',
    ['postcss-color-mod-function', {
      importFrom: [
        './assets/styles/vars.css',
      ],
    }],
    ['postcss-preset-env', {
      stage: 1,
      preserve: false,
      importFrom: [
        './assets/styles/vars.css',
      ],
    }],
    'tailwindcss',
    'autoprefixer',
    ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
    'postcss-nested',
  ],
}

[如上所述，它不适用于

.Card {
    @apply bg-blue-500;
}

，也不适用于基于前缀（md :)的文档：“不适用于内联另一个实用程序的伪类或响应变体。相反，将该实用程序的普通版本应用到适当的伪选择器或新的媒体查询中“