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

【问题标题】：Use tailwind @apply in CSS modules in Next.js在 Next.js 的 CSS 模块中使用 tailwind @apply
【发布时间】：2020-08-29 12:15:57
【问题描述】：

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

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

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

我收到以下错误：

语法错误：@apply 不能与.rows-span-3 一起使用，因为.rows-span-3 要么找不到，要么它的实际定义包含一个伪选择器，如:hover、:active 等。如果你确定@ 987654328@ 存在，请确保所有 @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',
  ],
}

【问题讨论】：

这个有运气吗？

标签： next.js css-modules tailwind-css

【解决方案1】：

我按照示例进行操作，并让 @apply 使用 nextjs css 模块使用

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

这不适用于rows-span-3，正如您在上面所说的那样，它也不适用于基于文档的前缀 (md:)：“不适用于内联伪类或另一个实用程序的响应变体。而是，将该实用程序的普通版本应用到适当的伪选择器或新媒体查询中”

【讨论】：

【解决方案2】：

我设法使用这个例子使它工作 link to tailwind doc

来自文档：

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

【讨论】：