🆕 Tailwind 3.0 ¡Descubre todas las novedades!

[@juanjesusuyedflorianvasque4188]

Tailwind es toda una joyita, lo odiaba hasta que por "jugar" decidí usarlo, resulta muy sencillo, ahorra mucho tiempo y con su sistema de personalización puedes ajustar todas sus clases a tu sistema de diseño. la curva de aprendizaje no es tan compleja ya que sus clases son semánticas , sus extensiones para VScode y con su documentación es más facil aún. PD1: Aprender CSS nativo al 100% siempre será mejor opción

[@rbenx_c]

que significa semantica

[@isturizz]

​@@rbenx_c Que los nombres de las clases tienen relación con la propiedad css que afecta, por ejemplo, el típico background-color de css nativo, en tailwind es bg-color, por ejemplo, bg-blue-100 y asignará el color azúl al fondo. Aunque también hay que decir que el nombre de algunas clases no tiene nada que ver con la propiedad css que modifica, por lo que habría que ir a la doc para enterarse bien.

Al principio odiaba tailwind por muchas clases en el html pero un dia lo utilize y lo amo xd

[@santiagotoloza]

Podés ahora usar un class en html y después en tailwind.css el input meter todas las clases , de esta manera te queda más ordenando

[@sagahkg5664]

Me podrias enseñar ? o donde lo aprendiste ?

[@directtv6778]

@@sagahkg5664 mira la documentación en la pagina oficial

[@TRCBlour]

Entonces, básicamente: - Bootstrap utiliza pocas clases para crear un objeto, pero esto a su vez hace que sea un poco más tedioso personalizar el mismo. - Tailwind utiliza más clases para crear un objeto, pero permite un personalización más rápida y profunda a cada objeto. Si entendí bien? Digo, he usado bootstrap antes, pero no tailwind.

[@darianmorat]

Cuando react native midu?

[@l4mole]

Si cuando ?

[@cristianchunza5266]

Hay algo que nosé si alguien ya lo sabía pero lo dejo por si las dudas o para alguien que esté empezando como yo 🤣. Usando react, cuando creas un componente y procedes a crear también la función que devuelve el div con el contenido HTML y tailwindcss puedes también colocar las clases como props que recibe la función en la clase , sin embargo no puedes utilizar los props en pedacitos de clase. Digamos que una clase sería text-green-100 No puedes usarlo así: className=`text-${props.colorTexto}-600` Sino que debes usarlo así: className=`${props.colorTexto}` Y cuando llames el componente de react en la página principal por ejemplo, tienes que colocarle el nombre del estilo completo. Que en mi ejemplo correspondería a props.colorTexto="text-green-100 "

[@girkloth6511]

En la documentación mencionan que no se puede concatenar string para las clases de tailwind

[@jordiest]

Con tailwind se que se pueden hacer tambien componentes de codigos con el fin de no utilizar tantas clasesy solo agregar una customizada

[@di.orellano]

Es verdad muy poca gente lo sabe, yo utilizo tailwind de esa forma y se trabaja mucho mas comodo por clases propias y componentes en una hoja de estilo separada

[@DonDregon]

@@di.orellano felicidades, has descubierto CSS xD

[@directtv6778]

@@di.orellano ya no tiene gracia 😂😂😂😂

[@directtv6778]

@@di.orellano me retracto,😅😅. Es muy buena herramienta

[@ignacioarriagadairiarte4338]

Tremendo video como siempre midu crack Será bonito ver el video de cuando migres tu blog

[@alexander-adp]

Hermano veo todos tus video y me gusta muchísimo como eres de explicativo te agradezco un montón haber creado este canal de KZbin para ensenar GRACIAS (NOTA , CUANDO HARAS UNOS VIDEOS DE ANGULAR ; IM ' PRO-ANGULAR)

[@charbouy]

Hola lo de 26:50 en codi link no me lo deja hacer, la casilla blanca de la izquierda no me la deja mover, ya probe cambiando el layout en settings, no me deja moverla, me esta enloqueciendo. gracias

[@brayanprieto1408]

Fan tuyo

[@anrzdev]

Eres el mejor midu

[@EnBuenChileno24]

Aca en Chile también se ocupa "esta tirao" a algo que es facil. Saludos jajaja

[@midulive]

Genial! 🇨🇱

[@Mike-df4ze]

Excelente tocayo un abrazo

[@AndresLobaton]

Hola, estoy en un proyecto de angular que framework me recomiendan, Talwind o Material ui?

[@willperlopez1829]

Angular material y puedes combinarlo con tailwind

[@4bzu]

ambos, la combinación perfecta jajaj

[@Deus-lo-Vuilt]

Midu podrias ayudarme con una duda , al subir un proyecto asi tendria que subir el index.html + la carpeta Dist que tiene el output.css ??

[@arielsanchez1686]

Durante el video sale una publicidad de un curso de next.js 12, se viene nuevo curso de midu?

[@luciaojos]

** Lo más impresionante de Tailwindcss v3 es que un SCRIPT autogenera el CSS y lo injecta dinámicamente. Estoy realmente impresionado con Tailwind 3. A años luz de todo lo demás

[@lautaroriveiro]

22:45 jajaaj que grande

[@larspier]

Para el numero de clases que usas una vez definido usas la propiedad @apply y agrupas todas esas clases para utilizarlas donde las necesitas

[@blackstratmx]

Eso es justo lo que tailwind no recomienda hacer, propone extraerlo en componentes, abusar de apply, sería lo mismo que usar clases en css... por eso es que no le veo ventaja a tailwind para ser sincero.

[@blackstratmx]

- No hay diferencia con inline styles a lo que hace tailwind, si bien en concreto son distintos en el concepto son lo mismo y sufren de lo mismo, ilegibles. - Tailwind permite escalabilidad a nivel del desarrollador pero potencialmente introduce inconsistencias en el diseño - Propone re-usar código envíandolo a un componente, lo cual introduce el mismo problema de siempre: si le muevo el estilo al componente podría romperlo en otro lado (en términos de diseño), que es lo mismo a mover una clase de css. - No estoy diciendo que no se use, pero sufre de los mismos problemas que css pero en otros lados.

[@midulive]

El primer punto no es verdad y a partir de ahí se parte de una base equivocada. El segundo no tiene nada que ver con Tailwind. El tercero no tiene sentido, cuando justamente es la gracia de los Design System y tampoco tiene que ver con Tailwind. Te puede no gustar Tailwind, no pasa nada, y es verdad que tiene sus propios problemas, como el de la legibilidad, pero creo que te falta conocerlo mejor para realmente ver sus desventajas, que las tiene.

[@blackstratmx]

@@midulive Cómo no va a ser verdad el primer punto si estas aplicando estilos inline con una sintaxis distinta? Si bien es mucho más avanzado, es básicamente lo mismo, el código se ve igual.. Los propios docs de tailwind lo dicen: A common reaction to this approach is wondering, “isn’t this just inline styles?” and in some ways it is- you’re applying styles directly to elements instead of assigning them a class name and then styling that class. Y en ese someway que se parecen viene la ilegibilidad, si o si.

[@blackstratmx]

@@midulive Referente a los demás puntos, a mi en lo personal me parece que cuando se escoge una tecnología hay que reconocer que el desarrollo es interdisciplinario y creo firmemente que podría haber después inconsistencies de diseño si no se revisa bien, lo cual muchas veces no pasa en QA. Y vuelvo a repetir, no digo que no se utilice; pero tampoco me parece que haya resuelto el problemón que es CSS+HTML de toda la vida.. ¡Saludos!

[@midulive]

​@@blackstratmx porque no son estilos en línea. Son clases. Utility classes, concretamente, algo inventado hace años (ni siquiera es algo que inventó Taiwlind) Las utility classes se reusan, ya que lo que tu ves con "shadow-lg" en realidad para hacerlo con un estilo en línea no sólo sería mucho más largo, si no que no podrías redefinirlo, algo que en tailwind sí puedes. Entiendo que las utility classes no son para todo el mundo, pero decir que son "inline styles" no es correcto y, sinceramente, suele ser que dicen los detractores sin mucho raciocinio. Tailwind tiene muchas desventajas, como que pueda ser difícil de mantener sin uso de herramientas, linters o plugins (por ejemplo, al escribir dos veces clases que colisionan o por los churros que salen) pero ya te digo que minimizarlo a un "inline styles" no es una de ellas. Te dejo un artículo que explica muy bien este tema: frontstuff.io/no-utility-classes-arent-the-same-as-inline-styles

[@blackstratmx]

@@midulive agradezco el artículo, entiendo las diferencias y por eso comenté que en concreto no son lo mismo. Es evidente que son mucho más poderosas y versátiles que un inline style, mi crítica es en el concepto, me explico: A mi me tocó aprender cuando aún no había ni css o apenas comenzaba, todavía algunos sitios web los realicé utilizando solo atributos de html, después vino css y lo primero que recuerdo haber hecho fue usar inline styles, sin embargo existía el mismo problema de antes, tener estilos junto con la estructura de html. Esa es justo mi critica al uso de utility classes y mas cuando siento que es muy fácil darles un sobre uso, aún cuando tailwind extraiga las que no se utilizan. Admito que quizá pueda ser distinto en el contexto de un componente, ya que en aquel entonces eso era inimaginable, quizás habría que ver de nuevo si esos conceptos sobre separar estilos de estructura aplican en la lógica de componentes o no. ¡Saludos!

[@alloy109]

Seré el unico que se dió cuenta de que Midu tiene la playlist de fondo con musica de Rocket League?

[@hagunara1738]

Alguien sabe como hace zoom en la pantalla....+

[@marketinginhouse]

Si hablamos de una web de uso personal, estaría bien que la haga solo Tailwind? o si hablamos de landing page?

[@jesuscc9225]

yo digo que sí, pero sin abusar mucho de tailwind components q ya están hechos para que no se vea tan genérico, la verdad si se pueden hacer muchas cosas con tailwind

[@rbenx_c]

que es landing page

[@edgarguitarist]

jajaajaj eres lo maximo!

[@victorfernandogilcalderon6242]

Ta potente

[@josbexerr5166]

interesante Tailwind, pero me quedo con CSS PURE

[@midulive]

Buena opción también!

[@guillermocalfuqueo6338]

primero! gracias por todo crack!

[@luisacevedo3570]

porqué dices APEL si la L está delante de la E? APPLE

[@charbouy]

3:11 bJAJAJAJ

[@andresmauriciogalloamado8212]

No es del tema, sin embargo. Tienes un curso con nodejs y aws?

[@joseysusamigos]

Perticular Xd :v

[@chicho69-cesar]

Mire el directo del state of CSS en KZbin y la verdad es que yo soy de los haters de Tailwind soy demasiado purista en mi código HTML y no me gusta nada tener clases y más clases

[@Zokram_Crossam]

La ventaja es que Tailwind hace una purga de todas las clases que no se usaron en el proyecto, aunque tener hasta 10 clases en un Input no es muy friendly de leer XD Tailwind para equipos pequeños es lo mejor !!! si la empresa tiene los recursos y el tiempo de entrega para mantener suficientes frontends que hagan su propio UI-KIT desde cero con código nativo siempre va a ser la mejor opción !!

[@axyLms]

A mi no tanto, pero si lo que me da un poco de hate, es el hecho de que por estar de moda Tailwind, hay mucha gente que se esta lanzando a aprenderlo sin saber CSS. Eso esta bastante mal, sobre todo si quieres ser frontend.

[@Zokram_Crossam]

@@davidjacobs7966 altos no necesariamente, porque los nombres de las clases son bien declarativas. Cómo ejemplo tienes en este vídeo como midudev pensando en la propiedad de css "overflow-x: auto" dedujo que podía existir una clase "overflow-x-auto" y resolvió una problemática. También aplicó el "transition" para hacer unos bonitos botones. Con tailwind no necesitas ser un máster de css, pero conocer al menos el nombre de la mayoría de propiedades es obligatorio diría yo :)

[@hponky]

No conoces nada de Tailwind si dices esos comentarios, sinceramente

[@egan36]

Tailwind o styled-components? Actualmente uso styled-components y me parece engorroso

[@RamDev-iu3go]

* Imagino que tendrá retrocompatibilidad con navegadores antiguos no? * Cállate niño