Tailwind 对等类不存在答案

【问题标题】：Tailwind peer class does not existTailwind 对等类不存在
【发布时间】：2022-01-26 03:42:49
【问题描述】：

我使用的是 tailwindcss 版本 3.0.7，当我在 @apply 语句中使用对等类时，它会抛出一个错误，提示“peer 类不存在。”

根据我在文档中阅读的内容，我认为这可能与我设置 jit 的方式有关。任何建议将不胜感激。

module.css 文件中的 css 语句

.switchInput {
    @apply peer hidden
}

我的 postcss.config.js 文件

module.exports = {
  plugins: [
    require('tailwindcss')('./tailwind.config.js'),
    require('autoprefixer'),
  ],
};

我的tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: [
    './src/**/*.html',
    './dist/**/*.html',
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [
  ],
};

webpack.config.js

rules: {
        test: /\.css$/,
        use: [{ loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
            },
          },
          { loader: 'postcss-loader' }],
      },

在你提到它之前，是的，我不应该使用 apply 语句，但我需要混淆我在这个项目中的所有类名，因为我正在制作一个需要避免与任何类的名称冲突的可嵌入小部件页。由于它的工作，我也不能使用 ShadowDOM。

【问题讨论】：

peer 和 group 实用程序不能与 @apply github.com/tailwindlabs/tailwindcss/issues/… 一起使用此来自 Simon 的评论是关于组的，但对同行也是如此。

标签： webpack tailwind-css css-modules

【解决方案1】：

首先，如果您使用的是 tailwind css v3.x，您应该更改“tailwind.config.js”文件。删除 'mode: jit' 因为 tailwind css v3.x 默认使用 Just-in-Time 引擎。此外，您应该删除“清除”选项并改用“内容”；现在你同时使用两者，这是错误的。您可以按照official upgrade guide 中的说明进行操作。

正如 JHeth 在 cmets 中所说，最好不要将“peer”或“group”实用程序与 @apply 一起使用。这是related link，所以你可以理解为什么。

【讨论】：