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

Question

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

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

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

我收到以下错误：

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

这是我的 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',
  ],
}

- bravokiloecho

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"。

- Ponleu