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

Question

我已经按照这里的官方指南在我的Next.js网站上设置了顺风：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存在，请确保在 Tailwind CSS 看到您的 CSS之前正确处理任何@import语句，因为@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',
],
}

Answer 1

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

从文档中：

你有这个模块 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"