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

Question

我已经按照这里的官方指南在我的 Next.js 站点上设置了顺风：https : //github.com/tailwindcss/setup-examples/tree/master/examples/nextjs

但是，当我尝试使用该@apply方法时，在组件级别的CSS 模块中，例如：

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

我收到以下错误：

语法错误：@apply无法使用，.rows-span-3因为.rows-span-3要么找不到，要么它的实际定义包含一个伪选择器，如 :hover、:active 等。如果您确定.rows-span-3存在，请确保在Tailwind之前@import正确处理任何语句CSS 看到您的 CSS，因为它只能用于同一 CSS 树中的类。@apply

这是我的postcss.config.js：

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',
  ],
}

Answer 1

我设法使用此示例链接使其工作 到 tailwind 文档

来自文档：

你有这个模块的CSS

/*Button.module.css*/
.error {
  @apply bg-red-800 text-white;
}

组件文件

//Button.js
import styles from './Button.module.css'

export function Button() {
  return (
    <button
      type="button"
      // Note how the "error" class is accessed as a property on the imported
      // `styles` object.
      className={styles.error}
    >
      Destroy
    </button>
  )
}

从示例中，请注意使用 className={styles.error}代替 className="error"