Al principio el .css de salida solo terminaba con 424 lineas de clases utilitarias y despues de buscar un poco en stackoverflow descubri que al hacer la compilacion por CLI el script debe ser npx tailwindcss-cli -i tailwind.css -o ./public/css/styles.css --watch y así el archivo de salida se completa con las 188386 clases utilitarias con las que se debe de terminar correctamente. NO LO OLVIDEN: npx tailwindcss-cli -i [aqí iria la ruta o nombre del archivo de entrada] -o [Aqui la ruta o archivo de salida] --watch
Que bueno papá!!!. Confieso ser un backend dev que odia bastante la parte del front :) , pero con Tailwind se hace hasta fácil maquetar y trabajar el front. Gracias por compartir.
En mi caso yo tuve que utilizar este comando porque el mencionado en el video me manda error: npx tailwindcss-cli@latest build ./src/estilos.css -o ./public/final.css
No suelo hacer muchos comentarios en vídeos de RUclips, pero este lo merece. Muy bien explicado todo, para poder empezar a trabajar con Tailwind es una gran ayuda. Enhorabuena!
Para la compilación en lugar de textear, se puede añadir un script en el package.js por ej. "build-css" : "tailwindcss build src/style.css -o public/style.css" y solamente añadir el cmd "npm run build-css"
Saludos desde Venezuela. Excelente video. Muchas gracias por la explicación, no va a fondo en el tema pero es clara y util, es la mejor que he visto por internet. Ahora falta la crema, como integrarlo con React, Vue o Angular (o Svellt que esta por ahi pululando tambien). Como integrarlo y como automatizar ese proceso de compilación desde un script en el package.json o algo asi en React. Creo que para Vue y Angular ya existe una libreria o funcionalidad que permite una integración mas facil.
Gracias amigo por tus videos ahora que veo tu canal son buenos gracias..! Una duda Bluuweb, siempre debemos de crear nuestras clases personalizadas dentro del archivo src/estilos.css o podemos crearnos un archivo.css en otro lado y hacer que lo compile al final.css del public..?
Estimado, felicitarte por la manera en que explicas los contenidos. En la medida de lo prudente, es posible que nos enseñaras a diseñar un layout básico con Tailwindcss? Atento a tus gentiles comentarios.
Muy buen video, precisamente estaba con la duda de cómo se instalaba con npm y cómo hacer la personalización. Aún tengo algunas dudas que quiero intentar aclarar por mi mismo, pero si no puedo te escribo. Muchas gracias!
Mil gracias por su video y explicación. Sin embargo tengo windows 7 en mi pc y se me estan presentando varios problemas en la instalacion. A el node.js que tengo instalado es v8.2.1....me puede dar alguna recomendación...
un dato para no estar escribiendo siempre la linea de build, lo agregas en el json, dependencias "script" creas un "build": "y toda la linea de codigo" asi lo ejecutas con npm run build.
También me encantaria un video quizás de los componentes más usados, se que hay muchas paginas que los proveen pero si de pronto conoces alguna que hayas usado seria genial un video de eso 🤗
Hola Amigo, es lo mismo usarlo por npm que por cdn? Porque quiero instalar por nmp la version 3.0 y no me funciona. La opción cdn si puedo usarla. Gracias. Muy buenos tus tutoriales!
Si alguno tiene un erroro y no crea el estilo.css en el public. cuando corren el comando deben agregarle autoprefixex quedaria asi: mpn install tailwindcss autoprefixer
Como siempre genial el video se entiende super!! me gustaria saber si quizas podrias explicar como hacer un purge de nuestros archivos css para dejarlos mas livianos, sobretodo con tailwind que igual es un poco mas pesado
Me gusto el video, talvez lo ponga en practica, quisiera saber algo, podrias hacer un video en el que expliques como cambiar el titulo de una pagina al hacer click en una imagen, pues quiero hacer una web que no recargue y si entro a otra sección el titulo de la web es es mismo (las imagenes las consigo de una base de datos algo así
Existe una forma nueva de configurar el proyecto?, el comando npx tailwind build... no me corrige los 3 errores del src/estilos.css (unknown at rule @tailwind)
cuando ejecuto el comando npx tailwindcss build src/estilos.css -o public/final.css me sale el siguiente aviso en la terminal : [deprecation] Running tailwindcss without -i, please provide an input file. , que debería hacer para corregir?
Uff amigo muchísimas gracias por compartir, desde el video #1 estaba esperando este video y no me defraudaste.. para los próximos videos seria genial uno explicando como configurarlo en angular, react y vue.. También seria genial uno de tips para que el compilado no quede tan grande pues veo que en consola salía que el peso es de 1.81mb y creo q es bastante entonces puede ser genial explicar como hacer que no quede tan grande ya que muchas veces hay cosas que no utilizamos.. :D
A mi me salio un error donde me pide el content que es en el archivo donde se aplican los estilos, quedando el archivo tailwind.config.js de esta manera: /** @type {import('tailwindcss').Config} */ module.exports = { content: [ './public/*.html' ], theme: { fontFamily: { rale: ['Raleway'], }, extend: { colors: { danger: "#FF5F40", info: { 100: "#24a19c", 200: "#6ebfb5", }, }, }, }, plugins: [], };
alguien ha usado los componentes de ejemplo , los fui a usar pero dice que se necesita el javascript que viene en los comentarios , pero no comprendo , el dropdown no me funciona podrian ayudarme.
a ya se porque es por que me faltaba el "--watch" quedaria así "npx tailwindcss -i ./src/estilos.css -o ./public/final.css" con ese refresca automaticamente
Instale de nuevo tailwind con el comando que sugiere la página oficial: npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 y seguidamente cree el archivo: npx tailwindcss init supongo que fue el primero el que hizo que funcionara, de igual manera dejo ambos por si acaso
esto es lo que aparece: PS C:\Users\Alumno\Desktop\Proyecto> npx tailwindcss build src/tailwind.css -o public/final.css [deprecation] Running tailwindcss without -i, please provide an input file.
@@22bears Hola amigo , yo pude solucionarlo , tienes que poner esto el tailwind.config , content: ['./public/index.html'], tienes que apuntas al archivo html para que recien te traiga los estilos.
@@poolnunez5139 npx tailwindcss-cli@latest build ./src/estilos.css -o ./public/final.css un chico de comentarios mas abajos subio esto y si me funciono
@@kevinnavacastillo Solucion: Instale de nuevo tailwind con el comando que sugiere la página oficial: npm install tailwindcss@latest postcss@latest autoprefixer@latest
@@poolnunez5139 hola chicos alguien me puede ayudar por favor? a mi no me aparecen los logos de HTML5 con los escudos y tampoco puedo instalar los estilos, intenté estas formas que ustedes pusieron pero no me anda D: AYUDA PORFA
![Tailwind CSS ⭐ Flexbox ⭐ [Parte 4]](http://i.ytimg.com/vi/sfTBUHR9pyA/mqdefault.jpg)
![Tailwind CSS ⭐ Flexbox ⭐ [Parte 4]](/img/tr.png)
![Curso de Node.js [ #05 Introducción a Express.js ]](http://i.ytimg.com/vi/VmH4tPbbDsM/mqdefault.jpg)
![Tailwind CSS ⭐ Grid ⭐ [Parte 2]](http://i.ytimg.com/vi/97hHnlnxpPQ/mqdefault.jpg)
Al principio el .css de salida solo terminaba con 424 lineas de clases utilitarias y despues de buscar un poco en stackoverflow descubri que al hacer la compilacion por CLI el script debe ser npx tailwindcss-cli -i tailwind.css -o ./public/css/styles.css --watch y así el archivo de salida se completa con las 188386 clases utilitarias con las que se debe de terminar correctamente.
NO LO OLVIDEN:
npx tailwindcss-cli -i [aqí iria la ruta o nombre del archivo de entrada] -o [Aqui la ruta o archivo de salida] --watch
Muchas gracias! Ahora si me funciona
Muchas gracias! No encontraba la solución
De verdad muchas gracias. Asi funciono
el --watch solo es necesario cuando quieres ver que hace el código, pueden omitirlo
yo ejecute esto: npx tailwind init tailwind.js --full
y despues ejecute npx tailwindcss-cli -i src/styles.css -o ./public/output.css
y ahi si funciono !!!
Este video me hizo comprender el como instalarlo en mi proyecto de una forma tan sencilla que todo lo que consulte en una semana jaja
Que bueno papá!!!. Confieso ser un backend dev que odia bastante la parte del front :) , pero con Tailwind se hace hasta fácil maquetar y trabajar el front. Gracias por compartir.
Gran video! Gracias por el aporte!!
Muy bien explicado, con la pausa indicada y muy claro todo, mis dieces.
En mi caso yo tuve que utilizar este comando porque el mencionado en el video me manda error:
npx tailwindcss-cli@latest build ./src/estilos.css -o ./public/final.css
Salvador!!!
gracias Hugo :3
graciassssssss
Genial, muchas gracias!
@@isabelcayuelaperez6895 También es recomendable colocar -i antes de la ruta del archivo de origen
Genial! Muchas gracias por compartir.
muchas gracias, espero el siguiente video
Buenísimo el curso, muchas gracias por tomarte el tiempo en compartir tus conocimientos. Saludos.
Yo use este para actualizar: npx tailwindcss -i ./src/estilos.css -o ./public/final.css
Gracias por la aportación :)
Eres grande, gracias por todo este contenido, excelente trabajo!!!!
Eres un ángel. Te amo.
Excelente curso para laravel me esta ayudando mucho
No suelo hacer muchos comentarios en vídeos de RUclips, pero este lo merece.
Muy bien explicado todo, para poder empezar a trabajar con Tailwind es una gran ayuda.
Enhorabuena!
Definitivamente excelente maestro, gracias por tus aportes!
seria bueno que hicieras un menu como adminlte3 aplicando todo lo que has enseñado :) solo es una idea gracias por el video
Para la compilación en lugar de textear, se puede añadir un script en el package.js por ej.
"build-css" : "tailwindcss build src/style.css -o public/style.css" y solamente añadir el cmd "npm run build-css"
hola Ronald qué tal. Dónde está esa carpeta para poder añadir ese cambio? no puedo crear con éxito la carpeta final, no me cargan los estilos
listo!! me sirvió buen atajo
Me ha encantado. Sería genial un proyecto html y darle estilo solo son tailwind. Explicas sumamente bien, muchas gracias por tu aporte.
Excelentes tutoriales, me re sirvieron!
Una pratica , si ! ..y si se puede vincular con React !! ..Muchas gracias por tus videos !
Muy buenos vídeos, son fáciles de entender.
Muy bueno campeón, buenísimo tu aporte y la claridad en tus conceptos. Y me sumo a Daniel con el pedido. jajajaj. Muchas gracias
gracias ppor otro gran video
Saludos desde Venezuela. Excelente video. Muchas gracias por la explicación, no va a fondo en el tema pero es clara y util, es la mejor que he visto por internet. Ahora falta la crema, como integrarlo con React, Vue o Angular (o Svellt que esta por ahi pululando tambien). Como integrarlo y como automatizar ese proceso de compilación desde un script en el package.json o algo asi en React. Creo que para Vue y Angular ya existe una libreria o funcionalidad que permite una integración mas facil.
Genial! vamos a revisar como integrarlo con Vue y React :) Saludos!
Buenas como andan? Tengo una duda, que seria la carpeta public y la src (Porque tienen el logo distinto al resto de carpetas convencionales)
las cagaste bro para explicar bien, no tengo palabras, gracias.
Un nuevo video genial
Excelente vídeo, seria bueno una practica.
Voy a practicar aún más y subo una práctica. Saludos!
Muchas gracias por el aporte muy bien explicado cómo siempre
Muchas gracias Adrian! Saludos!
Muchas gracias por tu video, me encantó
Gracias amigo por tus videos ahora que veo tu canal son buenos gracias..! Una duda Bluuweb, siempre debemos de crear nuestras clases personalizadas dentro del archivo src/estilos.css o podemos crearnos un archivo.css en otro lado y hacer que lo compile al final.css del public..?
Estimado, felicitarte por la manera en que explicas los contenidos. En la medida de lo prudente, es posible que nos enseñaras a diseñar un layout básico con Tailwindcss? Atento a tus gentiles comentarios.
Muy buen video, precisamente estaba con la duda de cómo se instalaba con npm y cómo hacer la personalización. Aún tengo algunas dudas que quiero intentar aclarar por mi mismo, pero si no puedo te escribo. Muchas gracias!
Genial Fabio, la idea es ayudar 🎉
que herramientas usas para hacer las guias ?? por favor
Mil gracias por su video y explicación. Sin embargo tengo windows 7 en mi pc y se me estan presentando varios problemas en la instalacion. A el node.js que tengo instalado es v8.2.1....me puede dar alguna recomendación...
Estaría bien que hicieras una practica
Muy buenos tus vídeos :)
un dato para no estar escribiendo siempre la linea de build, lo agregas en el json, dependencias "script" creas un "build": "y toda la linea de codigo" asi lo ejecutas con npm run build.
También me encantaria un video quizás de los componentes más usados, se que hay muchas paginas que los proveen pero si de pronto conoces alguna que hayas usado seria genial un video de eso 🤗
Hola Amigo, es lo mismo usarlo por npm que por cdn? Porque quiero instalar por nmp la version 3.0 y no me funciona. La opción cdn si puedo usarla. Gracias. Muy buenos tus tutoriales!
excelente tutorial, como continuación sería ideal darle superpoderes con AlpineJS...
Genial, no he trabajado con alpinejs lo vamos a estudiar. Saludos
consulta se puede subir un proyecto con tailwind a un alojamiento compartido ?
si colocan --watch, cada que guarden el archivo tailwind se va a compilar automaticamente de nuevo
Si alguno tiene un erroro y no crea el estilo.css en el public. cuando corren el comando deben agregarle autoprefixex quedaria asi: mpn install tailwindcss autoprefixer
he sufrido como dos horas para instalar tailwind. Es cierto funciona el:
npm install tailwindcss autoprefixer
Una pregunta? Trae algún sistema de navbar responsivo como bootstrap?
Acabo de revisar, y si lo tiene, uff pasare a usar este para mis proyectos.
👏🏼👏🏼👏🏼
Como siempre genial el video se entiende super!! me gustaria saber si quizas podrias explicar como hacer un purge de nuestros archivos css para dejarlos mas livianos, sobretodo con tailwind que igual es un poco mas pesado
X2 enséñanos a depurar porque he intentado pero no me queda :(
Por favor podrías hacer una instalación con vue? :3 muy buen video!
Me gusto el video, talvez lo ponga en practica, quisiera saber algo, podrias hacer un video en el que expliques como cambiar el titulo de una pagina al hacer click en una imagen, pues quiero hacer una web que no recargue y si entro a otra sección el titulo de la web es es mismo (las imagenes las consigo de una base de datos algo así
Existe una forma nueva de configurar el proyecto?, el comando npx tailwind build... no me corrige los 3 errores del src/estilos.css (unknown at rule @tailwind)
cuando ejecuto el comando npx tailwindcss build src/estilos.css -o public/final.css me sale el siguiente aviso en la terminal : [deprecation] Running tailwindcss without -i, please provide an input file. , que debería hacer para corregir?
En el archivo "final.css" no se cargaron los elementos.Te agradeceré, que me indiques dónde puede estar el error.
Hay que realizar la instalacion en cada proyecto que tengamos?
esa es mi duda. que averiguaste Juan?
Uff amigo muchísimas gracias por compartir, desde el video #1 estaba esperando este video y no me defraudaste.. para los próximos videos seria genial uno explicando como configurarlo en angular, react y vue.. También seria genial uno de tips para que el compilado no quede tan grande pues veo que en consola salía que el peso es de 1.81mb y creo q es bastante entonces puede ser genial explicar como hacer que no quede tan grande ya que muchas veces hay cosas que no utilizamos.. :D
Excelente... tal vez podrías ayudarnos con la personalización de SVG o de la propiedad "clip-path"
Hola, no la he probado pero la reviso y te comento. Saludos!
Gracias crack !
Que genial, ahora a seguir estudiando para las próximas secciones, saludos
grandioso videos :D
minuto 10:20 no se me cargó nada en la carpeta llamada final :/ vengo siguiendo todos los pasos y volví a hacer este último y nada... alguna idea?
tampoco me sale el logo de HTML5 en las tabs de la izquierda
Saludos me sale este error al momento de ejecutar el paso numero 2: Object.fromEntries is not a function
como haria para personalizar la altura
A mi me salio un error donde me pide el content que es en el archivo donde se aplican los estilos, quedando el archivo tailwind.config.js de esta manera:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./public/*.html'
],
theme: {
fontFamily: {
rale: ['Raleway'],
},
extend: {
colors: {
danger: "#FF5F40",
info: {
100: "#24a19c",
200: "#6ebfb5",
},
},
},
},
plugins: [],
};
Q rabia, sigo todos los pasos tal cual, y no me resulta ese paso del "build", ya he intentado de miles de formas distintas.
alguien ha usado los componentes de ejemplo , los fui a usar pero dice que se necesita el javascript que viene en los comentarios , pero no comprendo , el dropdown no me funciona
podrian ayudarme.
me sale error 9:20 cuando intento ejecutar ese comando :S
Boa idéia , pratica com animações
Animaciones! para allá vamos 👏🏼👏🏼 Saludos!
otra cosa cualquier cambio en el html tengo que ejecutar el comando "npx tailwindcss -i ./src/estilos.css -o ./public/final.css"
a ya se porque es por que me faltaba el "--watch" quedaria así "npx tailwindcss -i ./src/estilos.css -o ./public/final.css" con ese refresca automaticamente
Al ejecutar el comando npx tailwindcss build src/styles.css -o public/output.css
me tira el siguiente error: Error: Cannot find module 'autoprefixer'
Instale de nuevo tailwind con el comando que sugiere la página oficial: npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
y seguidamente cree el archivo: npx tailwindcss init
supongo que fue el primero el que hizo que funcionara, de igual manera dejo ambos por si acaso
@@ronaldinhofarfan7729 Gracias
Alguien más tiene problemas con la personalización de las fuentes? Los navegadores me bloquean la importación debido a CORS POLICY. Agradezco ayuda!!
Cómo se llama el tema
Hola Ignacio como consigo un cupón de 9.99 para tu curso de Vue js 2 Completo ¡De 0 a Experto! + Firebase + Node [MEVN]
Hola, hoy activé los cupones :) curso-vue-js-udemy.bluuweb.cl
@@bluuweb Muchas Gracias
Hola, porque no me sale la carpeta public
ruclips.net/video/vAaZoYhQQRg/видео.html ahi hay un video de un gringo que explica como instalarlo
Hagamos un dashboard :) saludos
Hola al compilar en 9:31 me dio un error Cannot find module 'autoprefixer'
Require stack:
- /Applications/MAMP/htdocs/ui-ux/proyecto/node_modules/tailwindcss/lib/cli/commands/build.js
- /Applications/MAMP/htdocs/ui-ux/proyecto/node_modules/tailwindcss/lib/cli/commands/index.js
- /Applications/MAMP/htdocs/ui-ux/proyecto/node_modules/tailwindcss/lib/cli/main.js
- /Applications/MAMP/htdocs/ui-ux/proyecto/node_modules/tailwindcss/lib/cli.js
Alguien que me ayude por faavor? no pude pasar de aqui
@@romeromilian2645 yo volví a correr la instalación con este npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
no me crea la carpeta de salida porqueeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee :(
pudiste solucionarlo? a mi no se me cargan los estilos en la carpeta final.css
sigue los pasos de la pagina oficial , estos ya están obsoletos , a menos que instales la versión del video.
tailwind con vue
Sería genial, voy a estudiar como realizarlo. Saludos!
hola, no me funcionaba la config pero vi este video ruclips.net/video/VUS3IPn1b5g/видео.html y lo solucioné
graciass tenia el mismo error
esto es lo que aparece: PS C:\Users\Alumno\Desktop\Proyecto> npx tailwindcss build src/tailwind.css -o public/final.css [deprecation] Running tailwindcss without -i, please provide an input file.
me sucede lo mismo pero nadie me contesta je
pudiste solucionarlo Mario?
@@22bears Hola amigo , yo pude solucionarlo , tienes que poner esto el tailwind.config , content: ['./public/index.html'], tienes que apuntas al archivo html para que recien te traiga los estilos.
alguien me podria ayudar, no se me instala el archivo final.css donde viene todos los archivos de tailwind, me aparece el error MODULE_NOT_FOUND'
A mi también bro no se compila me sale un error , me dices si hallas la solución por favor gracias.
@@poolnunez5139 npx tailwindcss-cli@latest build ./src/estilos.css -o ./public/final.css
un chico de comentarios mas abajos subio esto y si me funciono
@@kevinnavacastillo no me funciona bro :( me sale Error: EPERM: operation not permitted, mkdir 'C:\Users\Pool'
comando no existe: tailwindcss-cli
@@kevinnavacastillo Solucion:
Instale de nuevo tailwind con el comando que sugiere la página oficial:
npm install tailwindcss@latest postcss@latest autoprefixer@latest
@@poolnunez5139 hola chicos alguien me puede ayudar por favor? a mi no me aparecen los logos de HTML5 con los escudos y tampoco puedo instalar los estilos, intenté estas formas que ustedes pusieron pero no me anda D: AYUDA PORFA
ruclips.net/video/vAaZoYhQQRg/видео.html al parecer ahora se instala de esta manera
@@ronaldinhofarfan7729 yo tambien me paso viendo videos por fin encontre uno que vale la pena