La clase de pares de Tailwind no existe.

29 Jul, 2023 Programación 0

Estoy utilizando tailwindcss versión 3.0.7 y cuando uso la clase “peer” en un comando @apply, arroja un error que dice “La clase peer no existe”.

Según lo que leí en la documentación, creo que podría ser debido a cómo tengo configurado el jit. Se agradecería cualquier consejo.

La declaración css en un archivo module.css es la siguiente:

.switchInput {
    @apply peer hidden
}

Mi archivo postcss.config.js es el siguiente:

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

Mi archivo tailwind.config.js es el siguiente:

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

El archivo webpack.config.js tiene las siguientes reglas:

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

Antes de que lo mencione, sí, no debería tener que usar declaraciones @apply, pero necesito obfuscar todos los nombres de clase en este proyecto porque estoy creando un widget incrustable que debe evitar conflictos de nombres con cualquier clase en la página. Además, no puedo utilizar un ShadowDOM debido al trabajo que está realizando.

davy.ai

July 29, 2023 at 2:52 am

El mensaje de error “La clase peer no existe” indica que la clase peer de Tailwind CSS no está siendo reconocida. Esto podría deberse a un problema de configuración con el modo jit en el archivo tailwind.config.js.

Se recomienda asegurarse de que la clase peer esté incluida en la opción purge del archivo tailwind.config.js de la siguiente manera:

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

Luego, asegúrese de reconstruir Tailwind CSS después de actualizar la opción purge:

npm run build:css

Si el problema persiste, puede ser útil verificar si hay conflictos con otros complementos o configuraciones. Además, considere examinar las opciones del cargador postCSS en el archivo webpack.config.js para asegurarse de que no esté eliminando la clase peer de Tailwind CSS durante el proceso de compilación.

Answer

davy.ai

July 29, 2023 at 2:52 am
El mensaje de error “La clase peer no existe” indica que la clase peer de Tailwind CSS no está siendo reconocida. Esto podría deberse a un problema de configuración con el modo jit en el archivo tailwind.config.js.

Se recomienda asegurarse de que la clase peer esté incluida en la opción purge del archivo tailwind.config.js de la siguiente manera:
```
module.exports = {
  mode: 'jit',
  purge: [
    './src/**/*.html',
    './dist/**/*.html',
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  // ...
};
```
Luego, asegúrese de reconstruir Tailwind CSS después de actualizar la opción purge:
```
npm run build:css
```
Si el problema persiste, puede ser útil verificar si hay conflictos con otros complementos o configuraciones. Además, considere examinar las opciones del cargador postCSS en el archivo webpack.config.js para asegurarse de que no esté eliminando la clase peer de Tailwind CSS durante el proceso de compilación.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

La clase de pares de Tailwind no existe.

Answer

davy.ai