Aprendiendo Tailwind CSS desde Cero. ¡Estila más rápido! ⚡

[@midulive]

🟣 Sigue los directos en www.twitch.tv/midudev

[@oeroweb3988]

Como uso tailwind como styled component, seria bueno que hagas un video

[@chiky22lp]

Algo que valoro mucho de tú contenido, es que nos muestras no sólo las distintas tecnologías y herramientas, sino que nos enseñas cómo aprender, a encarar un nuevo lenguaje, librería, etc.. como aplicarlo, los pro y los contras, TODO. Muchas gracias Miduuu!!!

[@JohannDestroy]

Da tips, recursos, cosas que no deberíamos hacer, posibles errores uff es completisimo almenos como base

[@robertobriones]

Viéndolo en Febrero de 2023 y me encantó ver cómo empiezas todo escéptico al principio, y como a la mitad se va bien como te va gustando y terminas mucho más convencido que al principio. Jaja ¡Genial contenido como siempre!

[@mitor_5052]

16:09 no se si adelante te lo dicen, pero el -rotate y rotate son para el sentido horario

[@danielrivera6935]

Todo escéptico al principio y acaba encantando con Tailwind

[@davidkonevky7372]

Desde que veo tus videos, estoy en un bucle de ver tus tutoriales sobre lenguajes e empezar a usarlos. Pase de solo saber html css y js a ya aprenderme que es node, git, react, bootstrap y ahoea tailwind 😅

[@petacardi]

Excelente el comentario sobre aprender por el simple hecho aprender, expandir nuestros horizontes, opiniones y mantener el cerebro activo.

[@poncesoft]

A partir del minuto 25:30 te empieza a gustar mas genial.... Te felicito man por comentar sobre la neuroplasticidad y todo lo que compartes es muy importante es esta profesión. Gracias por compartir este video, man solicito tu permiso para compartirselo a mi equipo de trabajo y asi capacitarlos un poco mas rapido con tailwind. A Big hug man

[@midulive]

Claro, dale! ☺️ y gracias por el comentario

[@ivangalicia4618]

"Para criticar algo hay que conocerlo", si la industria aplicara ese principio...

[@jhonacss]

andaba aprendiendo tailwind y este video aparecio Gracias Midu!!!

[@genaroibc]

Este dia, Midu cayó en las garras de Tailwind. Desde entonces, nada es lo que era antes.

[@rafajimenezseibane2765]

Buen video, mis respetos. Tailwind te da un sistema de diseño para simplificar la decisiones. Por eso hay un lista de paddings, colores, fuentes, etc... Es una implementación sobre CSS de lo que uno de los creadores propone en su libro de "Refactoring UI". Tailwind no pretende ayudarte a escribir CSS directamente.

[@julioemc2]

jajaj Excelente. Aprendere Tailwind contigo. Fernando y vos son mis profesores favoritos en este mundo de la programacion web. Los felicito!

[@mortalswat]

Acabo de ver el video y se ve fantástico. Referente al `-rotate-6` creo que se establece para rotar a la inversa es como el - delante. Muchas gracias por todos tus videos. Un saludo!

[@itziarzamezagarcia966]

Genial como siempre!, muchas gracias por tu contenido y tu ayuda

[@itziarzg7524]

jajajaja. me ha encantado el final. con los valores arbitrarios y las clases, pues apara eso usamos CSS

[@Josvytron]

Hace falta un nuevo curso de Tailwind

[@NeoAres1]

ufff y los ejemplos de la web son etiquetas SIN atributos, al final me mareo y me voy al CSS puro jaja. ¡Un tuto genial como siempre!

[@JuanDiazPalma]

Es increible ver como pensabas sobre tailwind a tu opinion ahora a que lo usas jajaj, saludos midu!!

[@midulive]

Siempre estoy dispuesto a cambiar de opinión. :)

[@andreselpeza1628]

TailWind es una maravilla, buen video

[@axyLms]

Se ve muy interesante la verdad, lo voy a aprender, aunque no lo usaria en un proyecto grande, porque ensucia mucho el html

[@gabriel55424]

Lo que podes hacer para usarlo en un proyecto grande en llevar los estilos a otro archivo e importarlos, así queda más legible el código

[@gonzalobruna7154]

igualmente puedes usar tailwind con @apply y usarlo de la misma forma que el css, aunque es un poco volver a lo mismo pero el código se ve más limpio y tailwind facilita muchas cosas.

[@kevinrivas802]

Espero no se molesten, pero considero que Tw esta siendo usado mucho pero por personas que empiezan a programar o personas que vienen de Bootstrap, o Css puro, entonces ven el cielo, para los que llevamos tiempo en styled claramente vemos horrible esa cantidad abrumadora de clases

[@markdrew53]

Claro, por el tema de las utilidades. Siempre se tiene las opciones de crear una clase y usar @apply para reutilizar y no caer en código repetitivo.

[@kevinrivas802]

@@markdrew53 si pero es lo mismo que construir clases con css solo que usando tw

[@luisncn]

Yo soy programador junior y a la hora de maquetar vi bootstrap como una salvación hasta que comenzó el problema de las clases, a veces el código se hacia super difícil de leer, preferi usar bootstrap para adaptar paginas y el diseño prefiero hacerlo con css puro y sass, ese monton de clases siento que hace que el codigo sea super complejo de leer y tedioso a la hora de dar mantenimiento, asi que te apoyo, siendo programador novato, quizas hay mejores soluciones que me iran falta aprender, pero por ahora prefiero evitar mil frases en una clase

[@kevinrivas802]

@@luisncn exactamente es la problemática de las clases, sin decir que es tan dificil depurar desde donde una clase esta sobre escribiendo a otra, es por ello que styled components no lo cambio, es tan facil saber desde donde se esta modificando en elemento

[@markdrew53]

@@kevinrivas802 Al final son gustos, yo he usado styled component, pero no me atropo lo suficiente. Como todo ninguna tool es perfecta.

[@migesualdo]

No me paro de reír de cómo se fue enamorando midu de tailwind jajajaja

[@gomusic8695]

Si puedes si, construir clases de forma dinámica. A base tempString no hay ningún problema. Estoy harto de hacerlo.. eres un crack por cierto!!

[@joserferreyra]

Hola. Gracias por tus videos. Según lo que conoces, para trabajar con React, que me recomiendas para los estilos. Me gustò la forma de styled-components . Pero para agilizar me parece MUI. Agradeceré tu comentario. Saludos

[@rubendariohernandezcenteno5259]

"Ya he centrado algo que es imposible de hacer en CSS" Jajajajaja me muero de la risa, porque siempre lo mas complicado es hacer que todo quede centrado (o alineado hacia donde se quiere)

[@brigadasgrifo]

:D

[@ZzZz-dr7uq]

Bien midu este era el tutorial que estaba esperando :p , ahora uno de NextUI :D

[@jeezmcalle]

¡Hola Miguel Angel! ¿Qué librerías de componentes y/o librerías de CSS soléis utilizar en Adevintia? Gracias 😀

[@jibleg]

Viendo en Enero 2024 from México 🇲🇽

[@debernardez]

Tu cara al inicio del video lo dice todo XD

[@melania239]

vengo del futuro, al final ama Tailwind

[@savehunters4873]

recomendarías Tailwind CSS para alguien nuevo en el mundo del frontend ???

[@midulive]

Puede ser interesante para empezar.

[@luisncn]

hola bro te ahorrare algunas dudas por las cuales tambien pase, no soy un veterano pero la etapa inicial ya la supere, te recomiendo que domines perfecto el tema de css y sass luego de eso puedes usar alguna herramienta que te ayude al maquetado como bootstrap o el mismo tailwind, ¿que pasa? para proyectos pequeños paginas sencillas tipo informativas, folletos etc. Cae de perla usarlo porque te ahorras trabajo tediosos, pero si entras a una empresa y te toca trabajar paginas muy grandes o darle soporte muchas veces sale mas rentable caerse a golpe con css puro, entonces es importante que domines ambos y no dejes el css puro a un lado por la comodidad, al final son herramientas tu decides cuando implementarlas eso es lo que tieenes que manejar bien

[@savehunters4873]

@@luisncn muchas gracias bro y gracias por tu tiempo en responder esa duda que tenia. :) sos grande.

[@kevinat71]

un proyecto grande con tailwind no se si sea tan sostenible

[@CarlosLopez-lf1un]

Si que lo es, solo que es más verborreico a mi gusto, pero si lo dominas todo se hace fácil e intuitivo

[@reydavid7300]

@@CarlosLopez-lf1un cualquier cosa si la dominas es mas fácil, como hacer tarjetas perforadas y bueno jaja

[@Elaxkun]

Yo digo que sí, sólo tienes que usar lo de @apply y no sólo estilizar las cosas ahí mismo con las clases

[@adrianjam123]

hola midu disculpa, eso que cuando ves la sugerencias de codigo, los snippets y abajo te sale como parte una descripcion o detalle del codigo es una extension o directamente es como trabaja tailwind css?

[@faviolanarvaez453]

Me ha gustado mucho tailwind! Buen videoooo =)

[@midulive]

Gracias! 😊

[@lautarocarrizo1060]

grande midu!!

[@thebroki6684]

EXCELENTE VIDEO, BIEN EXPLICADO MASTER!!!!"

[@Juaye]

bien de vivo mi compaDREEEEEEEEEEEEEE

[@MaximusRGZ]

no sabia eso del theme voy a probarlo!!!!! 😁😁

[@templuismunoz]

@midulive podrías hacer una comparativa entre Tailwind, DreamWeaver ( el de Macromedia que es el bueno) y FrontPage 2000? Tengo dudas que elegir, Tailwind sigue con hype , pero frontpage hace código más limpio. Me ha hecho gracia lo de que hay que probar de todo... un viento de cola siempre ayuda. Bueno fuera de bromas. Es horrible accesiblidad-1 ( y no me refiero a arias etc. ) accesibilidad a para los propios programadores es una locura.

[@ElvioReyes-y8q]

Dreamweaver y frontpage? Eres un viajero del tiempo? Como van Kobe Y Jordan?

[@astrixwr5662]

Soy alguien que esencialmente usa CSS Puro y javascript para ayudarme, usé bootstrap y es funcional, pero me disgustó el hecho estar limitado por las clases, tailwind satura las clases en el HTML, es una manera fácil de armar la pag web, pero me quedo con CSS.

[@ing.yvonne]

Muy buen video, como siempre. Gracias! Tambien te queria preguntar si me puedes ayudar a identificar a que pertenece este código. Es de un proyecto que acabo de heredar y aunque se entiende, es la primera vez que lo veo así con estas etiquetas para el row y el col y esta manera de poner el ancho de las columnas. Gracias de antemano! Un saludo!

[@nico6346]

tamaño de columnas?

[@lautaroriveiro]

Gracias Midu!

[@AndresGonzalez-dz5bj]

Hola gente pero como usan al 100% tailwind si es de paga las delas propiedades???

[@rbenx_c]

11:30 cuáles eran las otras opciones a ganar?

[@Deus-lo-Vuilt]

Gracias por este video , dejo like y sub

[@midulive]

Gracias! 😊

[@sergioacuna1772]

37:12 La idea de tailwind es buena, como algo que quiere simplificar, pero con los nombres no tiene reglas definidas, falló la mnemotecnia, y aunque muy nuevo, se aplica igual.

[@nelsondavidmontanobarajas9199]

HOLAAAAA MIDU me encanta esa extensión de zsh que muestra los folders como si fuera un editor de código, y la otra extensión también me encanta que contrae el proceso anterior dejando casi limpia la consola, son solo disponibles para Mac, soy usuario de linux con zsh pero no he podido encontrar ninguna de esas dos extensiones entonces no se si sea cosa del iterm, te agradecería si me pudieras ayudar :D Gracias

[@diegonayalazo]

Excelente. Gracias

[@midulive]

Gracias por comentar, Diego!

[@14FL14]

GRACIAS MIDUUU CRACK

[@midulive]

Siempre

[@haroldhyde4199]

El "-" en el rotate, indica una rotacion negativa

[@cristiancarreno]

42:14 No sé cómo te lo ha aceptado. Yo he tenido que usar ( min-h-screen grid place-items-center ) SALUDOS!!

[@robertsakurai]

estoy en 38:00 ... Creo que la arbitrariedad del nombrado de las clases es para que sea fácil migrar de bootstrap y robar un poco de sus usuarios :P .... Te descubrí hace poco y valoro mucho lo que haces, al nivel de devs extranjeros, con mucha humildad y conocimiento. Gracias por el contenido!

[@jheyssonurbano7368]

¿Cuál es la alternativa a Tailwind que prefieres o recomendarías ?

[@Miguel-q1e4o]

@luisheskey8784 Y cuál recomiendas entonces ?

[@sebastianmedina5106]

Buenisimo video me gusta esta dinámica

[@reydavid7300]

Por que usaria tailwind en lugar de css modules?

No me terminó de convencer y entré para que Midudev me convenciera... pero ni así!

[@BlakeSoze]

alguien sabe si tiene un video mas actualizado de tailwind? no entendí como se instala 😞

[@fabiancruzsilva259]

Mañana debo hacer una tarea con Tailwuind, despues de ver este video sigo sin saber como lo hare. jajaja

[@CLauSKLoSE]

Solo vi los primeros 7 min y tengo que decir que es una versión mejorada de bootstrap, mi recomendación es aprender Css3 avanzado y con eso es suficiente, sabiendo las propiedades correctas solo tendrás que usar una clase envolvente y una que otra que sobre escriba a esta misma colocándola al lado dentro de la etiqueta html, en algunos casos ni siquiera será necesario usar clases ni id, a su vez esto facilita hacer cambios o reutilizar el mismo html en otro componente agregándole una clase extra. Espero esto les sirva como orientación a futuro ya que yo ya pase por esta etapa. Estoy a la orden por si alguien quiere tomar algún curso personalizado de Css3 de 0 a experto avanzado.

[@nicolaspage5201]

es cosas de gusto todo hacen lo mismo, en projecto muy grandes si o si css va a chocar con las clases de tu codigo, ademas de agregar mucho codigo extra, utilizar estos framework te ahorran mucho codigo innecesario. a no ser que hagas algo muy complicado y muy unico y ahi necesites css pero sera no se un input personalizado, un menu muy personalizado etc.

[@rickkk226]

Un framework de css sirve para ahorrar tiempo de desarrollo, pero tenés que dedicarle a aprender el framework tanto tiempo como a un lenguaje de programación. Algo no estaría siendo muy coherente. (no es crítica al video, el video es estupendo ... es una crítica al estado de cosas de desarrollo de frameworks y librerías que sinceramente comienza a ser que uno está más tiempo viendo como implementar y hacer que funcionen bien y se actualicen una docena de librerías en lugar de implementar soluciones)

[@SAW-vk3cg]

hola, tengo 2 años usando Tailwind si tiene dudas pueden preguntarme

[@lesterpaz797]

A mi me encanta Tailwind pero es que tiene sus cositas que no se jajaja Exactamente... porque rounded y no radius? Porque text-black y no font-black? etc... 😔 Que sea lo mas cercanos a las propiedades de CSS y seriamos felices.

[@csxcode]

Esta muy bueno tailwind pero prefiero saber lo crudo css a lo macho!

[@cristianovelazquez2048]

Gracias!! Pregunta: Para un proyecto más formal (descartando CSS "puro"), cuál es más recomendable? Bootstrap 5 o Talwind ?

[@s.p.a.c.e]

Te recomiendo de momento Bootstrap, es con el que mas están más familiarizados, y en ocasiones los mismos clientes creen "saber" mover estilos, y a veces ya conocen lo básico de bootstrap, mas a parte que es mas "semántico", quizá Tailwind" tiene mas fuerza y por lo mismo tiene mucho mas clases que no solemos manejar y llega a ser sumamente TARDADO la lectura del mismo.

[@DienerNoUta]

Ambos aprendelos, pero bootstrap es el que he visto que las coma;ias mas usan

[@canadiense1147]

Vine por el video de Nextui y me sorprende que no le gustara Tailwind al principio

[@marvinzuniga6706]

demasiado clases veo muy cargado el html, me quedo con CSS

[@CarlosCruz85]

Cuando hago builld con react y tailwind me sale en blanco :( ¿Qué puedo hacer?

[@jonaditommaso6635]

Nada que ver con el tema del video, pero necesito ayuda para conectar Next con Redux, sobre todo para que las pages compartan la misma store, podrías hacer un video sobre eso?? Sería genial.

[@kevinrivas802]

Porque no usas mejor React context

[@angelfigueroa6662]

@@kevinrivas802 es mejor context que redux?

[@kevinrivas802]

@@angelfigueroa6662 para mi si, CERO dependencias, más performance, nativo, y con menos bolerplait, pero ojo que hay gente que cree que redux o los context son para cache y no es asi, para eso usen otras herramientas como SWR o React Query y mi fav Grapqhl, el context debería ser para almacenar información compartida no data en una especie de cache

[@marcosmartilotta848]

Estoy teniendo un problema con mi tailwind intelicense y se me hace muy dificil escribir las clases sin eso. No logro hacerlo funcionar y segun muchas respuestas de foros tengo que editar la configuración de vs code. Pero cuando lo quiero hacer me dice que no puedo editarla. A alguien le pasó?

[@estebanvega1011]

Se ha caído mi héroe 🥲 tailwind nooo.

[@darksoldader]

por qué? es muy bueno y se está vollviendo el rey por eso mismo

[@estebanvega1011]

@@darksoldader A ver lo digo en plan de broma xD 🤣 .

[@egan36]

Para mi si vas a usar React(Vue, Angular...) usar Tailwind es trollear. Los componentes se hacen ilegibles, es mejor usar styled-components

[@SsmarcosS41]

porque ilegibles?

[@egan36]

@@SsmarcosS41 Porque si tenes que cambiar algo se hace muy dificil identificar lo que tenes que cambiar. Yo personalmente prefiero tener mayor cohesion por eso styled-components

[@SsmarcosS41]

@@egan36 te refieres a lo que hace cada clase ?

[@egan36]

@@SsmarcosS41 sep

[@fidelverduguez8854]

Siempre que veo toda esa formulación de clases para cada elemento, echo a correr, se me quitan todas las ganas de aprender frameworks. Y pienso que quizá solo debería entrenar el css estándar de hoy.

[@eduardoauditore5414]

Me parece excesivo lo que se tiene que aprender, es mucho mas fácil hacerlo con CSS simple o mejor aprender SASS o LESS

[@alfonso-22]

Hola, quisiera saber como usa zsh en mac. Y si es posible usarla en windows, como.

[@thebyren]

En windows se puede de varias maneras, en la que puedes usar zsh desde powershell es con wls. Investiga sobre ello es como una virtualizacion de Linux

[@az0feifa]

Hola. Nombre de la comunidad de Discord? Estoy iniciando y me gustaría seguir aprendiendo.

[@gusviaja]

Las veces en que usé fue obligado por código legado, está superestimado. Con mesmo Bootstrap customizando El sass ya está. És un horror dejar Los templates tan sucios de clases. Lo q pasa és q siempre hay q estar lanzando algo Nuevo

[@andresflorez8045]

Midu , existe Daisy Ui que son componentes con tailwind

[@danielsantiagoestupinancru1571]

Estuvo buena la reacción jajajaja, alguien sabe cuál es la terminal y configuración de theme que tiene, se ve super genial esa term

[@bricas13]

hola buenas tardes , estoy viendo tailwind practicando , instale tailwind con npm y al momento ya de terminar mi pagina y cerrar visual studio code y al momento de abrir el index desde mi carpeta no se muestra el diseño que puse , siendo que en visual studio code si se ven , me puede decir que esta pasando

[@emiliosalas6852]

No sé si aún te sirva jaja, pero como es una dependencia necesita ser interpretada antes de ir al navegador. El navegador no entiende Tailwind tal cual

[@MarcosCampos-t9m]

44:33 resumen del video xd

[@jago5101]

Me dio risa el comentario: ya me olvidé de css y ya me recordé de Tw

[@ricko13]

me quede en 40:11, vuelvo luego...

[@isaiascastaneda625]

clases como si no hubiera mañana jajajajaaj

[@juanmanuelchico]

tengo una entrevista de trabajo, me pidieron que haga un challenge, usando esta lib, y la verdad que no me gusta nadaaa! No entiendo por que me piden que lo haga con una tecnologia que no esta en mi cv!

[@midulive]

Porque no estará en tu CV pero igual en la empresa lo usan, no?

[@jefry9anarquia]

Es una bacanada,

[@JustAnonBro]

❤❤❤❤❤❤❤❤❤

[@carlosboyanosky8044]

Entré a ver por curiosidad, nunca usé Tailwind pero es el trend. Voy por la intro y desde ya la verbosidad no me gusta para nada... Veremos como sigue el video...

[@Jdbluesky]

Eres el mejor!! Si yo fuera homosexual me casaría contigo.

[@demonetiz3d]

Supongo que para proyectos pequeños y prototipado puede llegar a funcionar, pero no creo que funcione bien para proyectos grandes por las siguientes razones 1. Si algún estilo cambia, debes ir elemento por elemento modificando las clases 2. Es más difícil de leer 3. Si varios elementos tienen el mismo estilo, vas a tener mucho código repetido 4. Es poco personalizable, al menos mucho menos personalizable que CSS 5. Hay clases de tailwind que aplican varias propiedades CSS, por lo que es probable que dos propiedades sean incompatibles (ejemplo algunas que modifiquen la posición del elemento) y no puedes saber a simple vista por qué 6. Tu código JSX/HTML va a verse horrible Yo usaría SASS toda la vida antes que tailwind. Pero entiendo a la gente que lo usa igual

[@luiscl7762]

yo tambien utilizo SASS, pero no esta de mas saber un framework de css, ademas porque no todos los dias se crean proyectos grandes.

[@Felipe-pb9gu]

La masa sigue pegada con redux y tailwind.... Y express... Jaajjaja

[@alexr.2032]

12:05

[@hydeslayer690]

bulma css el mejor

[@Juanperez-kq5di]

No me convence, no me gusta dejar mis componentes con un montón de clases, aun no me ha tocado dar mantenimiento a una maquetación hecha con tailwind, pero de solo pensarlo da escalofríos, es como tener estilos en linea, ahí si surgen conflictos uff, resolver esos problemas de especificidad debe ser una pesadilla, igual es lo que ha la industria le gusta y tengo planeado aprender algo de tailwind, uno nunca sabe cuando le van mandar hacer mantenimiento a una pagina hecha con tailwind y es mejor estar preparado. Si soy yo el que voy elegir como hacer los estilos prefiero CSS con Sass

[@midulive]

Lo bueno es que Tailwind es sólo una opción entre muchas. :) Así que siempre puedes usar otras!

[@juansantos.182]

Alguien sabe como se llama esa extensión que le muestra las propiedades de los atributos? Excelente video

[@gonzalobruna7154]

se llama literalmente tailwind, es una extensión oficial.

[@jorgericaldi6438]

A mi me parece una basura totalmente. Entiendo su proposito pero solo veo problemas. BEM me deja todo limpio y facil de corregir. En cambio tenerlo con tailwind un componente que tiene todo incluido media queries es un dolor de cabeza horrible. se vuelve insorportable.

[@edwinloaiza1017]

Interesante pero discutible.....