La cantidad de variantes que existen para mostrar cómo debe configurarse postcss.config.js es extremadamente confusa. Hay ejemplos (como el de la documentación de tailwindcss ) que usan esto:
// Example 1: module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }luego están aquellos que requieren las bibliotecas:
// Example 2: module.exports = { plugins: { require('tailwindcss'), require('postcss-preset-env')({ stage: 0, 'nesting-rules': true }) }, } Otros requieren bibliotecas externas antes de configurar module.exports :
// Example 3: const tailwindcss = require('tailwindcss'); const postcssPresetEnv = require('postcss-preset-env'); module.exports = { plugins: { tailwindcss, postcssPresetEnv }, }y de nuevo algunos más que son necesarios, cuando se tiene que incorporar un archivo de configuración que no está nombrado de acuerdo a los valores predeterminados.
Hoy recibo este error cuando ejecuto yarn dev con un postcss.config.js como se muestra en el Ejemplo 2:
Syntax Error: /[path]/_pod-test/postcss.config.js:3 require('tailwindcss'), ^^^^^^^^^^^ SyntaxError: Unexpected stringCuando elimino la línea con "tailwindcss", sucede lo mismo con "postcss-preset-env":
Syntax Error: /Volumes/_III_/Z_WWW/_ZZZ PoD/_pod-test/postcss.config.js:3 require('postcss-preset-env')({ ^^^^^^^^^^^^^^^^^^^^ SyntaxError: Unexpected stringCuando luego cambio a una configuración como se muestra en el ejemplo 1, aparece este error:
Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8. Migration guide for end-users: https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users¡Yo uso postcss 8.3.9!
Todo esto sucede en un proyecto que se configuró con vue-cli como un proyecto Vue2.
¿Qué brujería tengo que aplicar para que esta configuración funcione?
En su terminal, ejecute el siguiente comando para instalar Tailwind CSS y sus dependencias a través de npm.
npm install tailwindcss postcss autoprefixerEs posible obtener el mensaje de error que mencionó cuando intenta ejecutar el proyecto
Error: PostCSS plugin tailwindcss requires PostCSS 8.Ejecute el siguiente código para desinstalar la instalación anterior y corregir el error
npm uninstall tailwindcss postcss autoprefixer npm install tailwindcss@npm:@tailwindcss/postcss7-compat@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9A continuación, debe generar los archivos de configuración Tailwind y PostCSS
npx tailwindcss init -pSus archivos de configuración deberían verse así
archivo postcss.config
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, };archivo tailwindcss.config
module.exports = { future: { // removeDeprecatedGapUtilities: true, // purgeLayersByDefault: true, }, purge: [], theme: { extend: {}, }, variants: {}, plugins: [], };Finalmente, abra su archivo main.js e importe el archivo tailwind.css que contiene las directivas de tailwind, es decir
import './css/tailwind.css'Hay una diferencia sutil, pero muy importante, entre los ejemplos 1 y 2 que publiqué.
¡El ejemplo 2 es realmente incorrecto!
Mientras que el ejemplo 1 usa objetos para configurar los parámetros de los complementos, el segundo ejemplo usa llamadas a funciones. Y esos deben ponerse en un ARRAY (es decir: corchetes en lugar de llaves).
Esta sería la versión correcta del Ejemplo 2:
// Example 2 fixed: module.exports = { plugins: [ // <= here we MUST use brackets! ... [function calls] ... ], }Todavía no he probado si eso también es cierto para el ejemplo 3 (pero supongo que sí).
¡Espero que esto ayude a alguien!
para mí es ESTA configuración que puede ejecutarse correctamente:
// Example 3: const tailwindcss = require('tailwindcss'); const postcssPresetEnv = require('postcss-preset-env'); module.exports = { plugins: { tailwindcss, postcssPresetEnv }, }y con estas bibliotecas de versiones:
"postcss": "^8.4.6", "postcss-cli": "^9.1.0", "tailwindcss": "^3.0.18",No pruebo todas las funciones postcss en este momento, pero el archivo de proceso básico en CLI se ejecuta correctamente...