Introducción y Setup de Tailwind CSS

La diferencia entre npm install y vue add puede ser confusa pero trataré de explicarlo:

npm install: Instala una dependecia dentro de nuestro proyecto, simplemente la agrega para que podamos empezar a hacer uso de ella

vue add: Añade un plugin al CLI de vue, en este caso, añadimos un plugin que el profesor creó, ese plugin ya se encargaba de installar a través de npm install la dependencia de Tailwind, pero no solo lo instaló, sino que también lo configuró, con npm install tendrías que hacer esas configuraciones tu mismo, en este caso, el plugin del profesor ya hizo las configuraciones

Hay que correr nuevamente npm run serve para que tome los cambios

Deberían dar un curso en dónde enseñen a crear estos plugins.

vue add @ianaya89/tailwind

TailwindCSS es un framework que no tiene componentes sino utilidades de CSS, en vez de preocuparte por decidir que componente usar TailwindCSS te da clases que hacen algo específico en CSS como poner texto en negritas, redondear bordes, poner sombras y cosas atómicas y pequeñas.

https://tailwindcss.com/

amigos para los que son curiosos y no se quieren quedar solo con la instrucción del profesor. 😄
Setup the Tailwind desde cero. muchos éxitos

Ojo yo tuve que detener el server y volver a prenderlo para que reconociera los cambios al agregar Tailwind

Me topé con un error después de añadir el plugin de tailwind y lo solucioné instalando lo siguiente:

 npm i -D [email protected] [email protected]

Error

Si tienes problemas con la instalación del plugin pueden usar este otro que esta actualizado y también es fácil de configurar:

vue-cli-plugin-tailwind

Solo tienen que ejecutar en consola:

vue add tailwind

Y seleccionar opción " full " para agregar toda la configuración de tailwind, luego puedes seguir con la clase con normalidad

vue add@ianaya89/tailwind plugin creado por ianaya para configurar y tener tailwind funcionando en el proyecto, importante estar en la carpeta raiz del proyecto antes de correr estos comandos.

Guía oficial para instalar Tailwind manualmente:
https://github.com/tailwindcss/setup-examples/tree/master/examples/vue-cli

Tailwind CSS

Para este proyecto en particular, hacemos vue add @ianaya89/tailwind

Buen dia a todos, se me presento el siguiente error al tratar de instalar Tailwind CSS:

Error: PostCSS plugin tailwindcss requires PostCSS 8.

Asi que despues de leer un poco en algunos foros y en la documentacion oficial https://tailwindcss.com/docs/installation#post-css-7-compatibility-build de Tailwind, hice lo siguiente:

1. desinstale las dependencias de Tailwind:
   npm uninstall tailwindcss postcss autoprefixer
2. limpie la cache de npm
   npm cache clean --force
3. instale las dependecias sugeridas en la documentacion oficial de Tailwind para solventar este error
   npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
4. Cree los archivos de configuracion de Tailwind utilizando el siguiente comando
   npx tailwindcss init -p
5. Edite el archivo de configuracion tailwind.config.js y reemplace la linea de codigo
   purge: [],
   por esta
   purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
6. Finalmente, cree la carpeta css y el archivo tailwind.css manualmente y coloque las referencias de Tailwind
   @tailwind base; @tailwind components; @tailwind utilities;

Espero que sirva como refencia para aquellas personas que les sucede el mismo error que a mi; toca esperar a que solucionen estos problemas de compatibilidad para actualizar por completo el proyecto de VUE.

A los que han llegado hasta acá actualmente (febrero 2022), el curso esta desactualizado y pueden tener inconvenientes al momento de instalar y realizar el proyecto como tal y eso frustrar, así me sentía yo pero me toco investigar por mi cuenta y leer la documentación de vue, vuecli y tailwind para saber como crear e integrar un proyecto actualmente y al final fue satisfactorio por que aprendí mucho mas y lo hice por mi cuenta, los invito a que lo intenten y si necesitan ayuda me dejan un comentario, con gusto les ayudare. Saludos.

Si les da el siguiente error: Syntax Error: Error: PostCSS plugin postcss-nested requires PostCSS 8.
Lo que deben hacer es instalar postcss: npm install postcss

installar tailwind css
-> vue add @ianaya89/tailwind
import tailwind en main js
-> import “@/assets/css/tailwind.css” -> sin nombre y @ es ref src

Les dejo el repositorio de github de mi proyecto ya finalizados en las dos versiones de Vue (LES RECOMIENDO QUE LE ECHEN UN OJO POR QUE A LO LARGO DE ESTE CURSO SE VAN A ENCONTRAR CON VARIOS ERRORES):

Vue2.
https://github.com/castellanosfelipe/Felipe-Exchange-vue2.git[]

Vue3.
https://github.com/castellanosfelipe/Felipe-Exchange-vue3.git[]

Espero les sirva y me regalen una estrella en github 😃

yo me fui por aqui chicos, https://github.com/tailwindlabs/tailwindcss-setup-examples/tree/master/examples/vue-cli, y obvio, para actualizar debemos seguir estas indicaciones https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

Changos… es la primera vez que escucho de tailwind… me suena como a lass. Bueno, más adelante ya veremos como usarlo… 😅

Excelente clase!!!

para acceder a la carpeta del proyecto hay que poner en la terminal cd platzi-exchange luego enter y después recién vue add @ianaya89/tailwind

Cerre mi proyecto y ya no lo pude volver a abrir en el server para visualizarlo, escribí npm run dev, estoy equivocándome de comando?

Tailwindcss es mi 2do FrameworkCss preferido, el primero es Bootstrap.

Quizás le ayude a algún compañero en Windows, para detener npm run serve, colocamos ctrl + c y luego enter.

Les dejo a todos un cheat shet de tailwind que uso cotidianamente y es muy productiva.
https://tailwindcomponents.com/cheatsheet/

Tailwind CSS

Es un framework de CCS que nos permite crear y construir nuestro contenido y markup a partir de clases, es diferente a Bootstrap y Bulma, permite crear contenido HTML a través de clases basadas en utilidades.

Vue add es un comando del CLI que permite agregar plugins al proyecto.

vue add nombreDelPuginAInstalar

Este comando siempre se debe de correr en la raíz del proyecto que se esté trabajando.

Para importar archivos CSS, vamos al archivo main.js, para ello se utiliza la misma sintaxis que se utiliza para importar módulos:

import "@/assets/css/tailwind.css"

No se especifica ningún nombre ya que solo queremos que se incluya, que se cargue el archivo por el browser. La @ sirve para hacer una referencia relativa al directorio source,

Que bueno utilizar otra herramienta que no sea propiamente el Bootstrap, es la primera vez que escucho sobre esta framework basado en utilidades

al realizar npm run serve les sale este error

 error  in ./src/assets/css/tailwind.css

Syntax Error: Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:

vayan al enlace

y realicen en la consola los siguientes codigos

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

a mi me soluciono el error, espero les sirva

Si tenían el servidor de la app corriendo, deben detenerlo con ctrl + c y luego levantarlo de nuevo con nom run serve

Hola, me aparece el siguiente error. ¿Alguien sabe cómo solucionarlo?

�🚀  Invoking generator for @ianaya89/vue-cli-plugin-tailwind.
�📦  Installing additional dependencies.

npm ERR! network timeout at: https://registry.npm.taobao.org/postcss/download/postcss-6.0.23.tgz?cache=0&sync_timestamp=1588603520850&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss%2Fdownload%2Fpostcss-6.0.23.tgz```

Se ve bien tailwind, nunca lo había utilizado, veamos que tal nos va

¿Cuál sería la principal diferencia con Bootstrap?

Hola, al ejecutar el comando mencionado solo me agrego esta línea a mi package.json y fue en devDependencies, no me creó el archivo css ni tailwind.js ¿A alguien más le paso?

¿Alguien sabe cómo se llama ese plugin del bottom de la terminal? El que muestra las stats del computador.

No conocía Tailwind CSS, que buen dato.

Nunca me funciono Tailwind

Hola, no se quien vea esto pero si prefieres instalarlo desde la pagina oficial de tailwind te dira que esta con Vue3 porque es el más reciente y asi, pero sigue el mismo proceso que te aparece solo en donde tienes que instalar los modulos de npm no copies la linea de codigo que te ofrecen, en vez usa esta:
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Y de ahi sigue con la instalacion y corre ‘npm run serve’ y sera lo mismo y podras usar tailwind en tu proyecto desde el inicio sin generar conflicto.

Es un framework de CSS que permite crear el contenido a partir de clases. Es diferente a otros frameworks (Boostrap, Bulma) que permite crear contenido HTML con clases basadas en utilidades.

como me salió un error cuando ejecute npm run serve, utilice los siguientes comando y arranco
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

👌

Al ejecutar el proyecto me daba este error:
Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
Era solo correr estos comandos para reinstalar Tailwind

1. npm uninstall tailwindcss @tailwindcss/postcss7-compat

2. npm install tailwindcss@latest postcss@latest autoprefixer@latest

Les dejo el link con la explicación: https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

Para los que deseen esten siguiendo el curso y necesiten mantener _‘single quotes’ _y algunas reglas de prettier encontre este enlace:
ES Lint, Prettier, Vetur, VSCode: Ironing out the conflicts

Vue se está volviendo dificil de comprender, pero le veo mucha potencia!
Indagando en la documentacion oficial encontré que uno puede usar directamente preprocesadores como Pug, styless, sass, etc
También me he encontrado que Vue es muy usado para crear el front para servicios de python.
Bien por Vue

hola buenos dias, consulta a alguno le salio el siguiente error al intentar hacer el vue add @ianaya89/tailwind

npm ERR! Cannot read property ‘match’ of undefined
npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Gonzalo\AppData\Roaming\npm-cache_logs\2020-06-17T15_09_56_816Z-debug.log