Está integrando Tailwind con una herramienta que se basa en una versión anterior de PostCSS. Puede usar este documentohttps://tailwindcss.com/docs/installation#post-css-7-compatibility-build

trabajó para mi :

 npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Tuve el mismo problema al usar laravel 8, así que intente desinstalar Tailwind usando "npm uninstall tailwindcss" e instálelo de nuevo usando

npm instalar tailwindcss@compat

luego ejecute "npx tailwindcss init" si no tiene el archivo tailwing.config.js

luego ejecute npm run watch.

siga la documentación de laravel para obtener más información cuando se quede atascado https://laravel.com/docs/8.x/mix#tailwindcss

La solución anterior solucionó el problema de TaildWindCss PostCss, pero enfrenté otro error, que es:

TypeError: getProcessedPlugins is not a function

La solución es actualizar la versión de Node , en mi caso, actualicé de v10 a v15, lo que solucionó mi problema.

Curiosamente, tuve este problema en una máquina de desarrollo. . . pero no el otro, con un archivo package.json idéntico y usando un nodo/npm idéntico (15.5/7.3). Eliminé node_modules, reinstalé. No lo arreglé.

La solución final, que es extraña, es después de la reinstalación del módulo de nodo, todo lo que hice fue:

 npm uninstall tailwindcss

luego

 npm i tailwindcss --save-dev

(nota, no usar el paquete de compatibilidad) y funcionó bien. Tengo que usar --legacy-peer-deps cuando reinstalo node_modules, por lo que de alguna manera el orden de instalación importaba en mi escenario. . .

Tuve el mismo problema e hice lo siguiente para resolverlo;

1. Verifique su versión de npm usando npm -ver y asegúrese de instalar la última versión
2. También verifique su versión de Node y actualice a la última versión a través de esta URL: "https://nodejs.org/en/download/"

Esta solución a continuación debería funcionar perfectamente.

Ejecute los siguientes comandos

 npm uninstall tailwindcss postcss autoprefixer npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

EDITAR: Se eliminaron algunos espacios erróneos.

tienes que uninstall todo esto

npm uninstall autoprefixer postcss tailwindcss

Luego ejecute este comando, generará el archivo tailwind.css automáticamente

 vue add tailwind

Intenté todo y todavía tenía TypeError: getProcessedPlugins is not a function . Lo que me solucionó el problema fue actualizar la versión de nodejs.

Para comprobar la versión del nodo instalado

 node -v

mi versión de nodo era v10.23.0 y estaba usando Ubuntu. Actualicé a v14.15.4 .

Así es como actualicé el nodo

 sudo apt update curl -sL https://deb.nodesource.com/setup_14.x | sudo bash - sudo apt-get install -y nodejs node -v

también limpié el caché para estar más seguro

 npm cache clean -f

Después de actualizar, eliminé la carpeta node_modules dentro del proyecto. ejecutó npm install y luego ejecutó npm run dev dentro de la carpeta del proyecto.

Esta es la única solución que funcionó para mí, así que compártela.

Desinstale Tailwind y vuelva a instalar usando la compilación de compatibilidad en su lugar

 npm uninstall tailwindcss postcss autoprefixer npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Para resolver este error, desinstale Tailwind y vuelva a instalar usando la compilación de compatibilidad en su lugar:

 npm uninstall tailwindcss postcss autoprefixer npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Solución de la documentación de Tailwind v2

Recibí un error del árbol de dependencias cuando intenté desinstalar e instalar con la versión compacta. Así que tuve que instalarlo con yarn y funciona.

 npm uninstall tailwindcss postcss autoprefixer yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

npm uninstall tailwindcss postcss autoprefixer

luego

 vue add tailwind

para usar el complemento vue cli https://www.npmjs.com/package/vue-cli-plugin-tailwind

Estoy en una Mac usando VueJS 3 (@vue/cli 4.5.11). Para mí, los siguientes dos comandos resolvieron el problema:

 npm uninstall tailwindcss postcss autoprefixer npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Esta instalado:

• viento de cola 2.1.1
• postcss 8.2.10
• autoprefijador 10.2.5

La respuesta aceptada ahora está desactualizada.

A partir de v2.0, Tailwind CSS depende de PostCSS 8. La respuesta previamente aceptada indica cómo cambiar a PostCSS 8

En su lugar, haga lo siguiente para que todo funcione en las últimas versiones

yarn add @storybook/addon-postcss

Luego edite su .storybook/main.js

 module.exports = { stories: [ "../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)", ], addons: [ "@storybook/addon-links", "@storybook/addon-essentials", { name: "@storybook/addon-postcss", options: { postcssLoaderOptions: { implementation: require("postcss"), }, }, }, ], };

https://storybook.js.org/addons/@storybook/addon-postcss

@dlporter98

Mientras no use Vue, espero que esto ayude a otros con un problema similar. En mi caso, estaba usando TailwindCSS con Gulp (^4.0.2) y pude resolver el error eliminando tailwind y sus dependencias:

npm uninstall tailwindcss gulp-postcss autoprefixer

Luego los volví a instalar, pero especificó explícitamente el complemento postcss como versión 9:

npm install tailwindcss autoprefixer gulp-postcss@9

Probé con gulp-postcss@latest , pero descubrí que seguía instalando la versión 8.3.1 y no resolvió el error. Se puede ver más información aquí:https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

De lo contrario, me haría eco del uso de la versión de compatibilidad con Tailwind.

También me enfrenté a este problema durante la actualización. anteriormente hice la configuración usando postCSS.

la documentacion oficial dice

Note that Tailwind CSS v3.0 requires PostCSS 8, and no longer supports PostCSS 7. If you can't upgrade to PostCSS 8, we recommend using Tailwind CLI instead of installing Tailwind as a PostCSS plugin.

Así que esta vez hice la configuración usando cli. https://tailwindcss.com/docs/installation

1. yarn remove tailwindcss postcss autoprefixer
yarn add --dev tailwindcss@latest @tailwindcss/typography@latest @tailwindcss/forms@latest @tailwindcss/aspect-ratio@latest @tailwindcss/line-clamp@latest postcss@latest autoprefixer@latest

2. npx tailwindcss -i ./src/assets/css/style.css -o ./src/assets/css/tailwind.css --watch

Y en package.json necesito hacer este cambio

https://tailwindcss.com/docs/content-configuration#it-simplemente-no-está-funcionando-correctamente

mi paquete.json

"start": "concurrently \"npm run start:css\" \"react-scripts start\"",
"start:css": "tailwindcss -o src/assets/css/tailwind.css --watch",
"build": "tsc && npm run build:css && react-scripts build",
"build:css": "NODE_ENV=production tailwindcss -o src/assets/css/tailwind.css -m",

Esta respuesta me ayudó a resolver el problema https://stackoverflow.com/a/70492649/7225816

Con Vue 3 y Tailwindcss 3

1. Crear tailwind.config.js
2. Crear postcss.config.js
3. Agregue lo siguiente en postcss.config.js

 module.exports = { plugins: { tailwindcss: { config: './tailwind.config.js' } } }

La configuración anterior funciona bien con los últimos postcss, autoprefixer, vue 3 y tailwind 3

Esto funcionó para mí: ejecutando "npm install tailwindcss postcss" y "npm install tailwindcss autoprefixer"

esto separa la instalación de postcss y autoprefixer de forma independiente.

Equivalente de hilo para aquellos que están atascados con PostCSS v8 debido al uso de un marco como Vuepress v1:

yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Para aquellos que actualicen a Tailwind 3 y experimenten este problema, las siguientes instrucciones de la solución de problemas de Tailwind son las que me solucionaron.

Específicamente, cambiando sus scripts de inicio y compilación:

 "start": "concurrently \"npm run start:css\" \"react-scripts start\"", "start:css": "tailwindcss -o src/tailwind.css --watch", "build": "tsc && npm run build:css && react-scripts build", "build:css": "NODE_ENV=production tailwindcss -o src/tailwind.css -m",

Sin embargo, tendrá que instalar concurrently y npm-run-all .

El siguiente es mi postcss.config.js :

 module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }

Esto significará que tendrá que importar index.css tailwind.css su archivo index.{tsx,js} para el proyecto.

Y si esto funcionó para usted, tenga en cuenta que es posible que ya no necesite @craco/craco .