Por qué no uso "Tailwind CSS" en mi código
ฝัง
- เผยแพร่เมื่อ 22 ก.ค. 2024
- Tailwind CSS es uno de los frameworks CSS más populares que hay hoy en día. Hoy te contamos los motivos por los cuáles no lo usamos y también cuando sí que lo usaríamos.
¡Curso Selectores CSS! ➥ bit.ly/curso-selectores
Post de por qué utilizar Tailwind ➥ adamwathan.me/css-utility-cla...
﹤🍍﹥ CodelyTV
├ 🎥 Suscríbete: th-cam.com/users/CodelyTV?sub_co...
├ 🐦 Twitter CodelyTV: / codelytv
├ ⚡️ Twitter María: / marie_nei
├ 💂🏼 Twitter Rafa: / rafaoe
├ 📸 Instagram: / codelytv
├ ℹ️ LinkedIn: / codelytv
├ 🟦 Facebook: / codelytv
└ 📕 Catálogo cursos: bit.ly/cursos-codely
Chapters:
00:00 Tailwind CSS
02:55 Arquitectura CSS
04:50 Cómo compararlos
05:06 Curva de aprendizaje
06:36 Legibilidad
09:07 Mantenibilidad
13:16 Escalabilidad
15:53 Resultado final - วิทยาศาสตร์และเทคโนโลยี
¿Usas Tailwind en tu día a día? ¿Crees que nos hemos dejado algún punto interesante por tratar? 🙂
Yo lo uso en mi día a día.
Tal y como habéis explicado con Laravel, para proyectos que son pim-pam en los que el presupuesto es el que es, no nos podemos permitir meter a un desarrollador front a crear toda esa serie de componentes que obviamente cuando tenemos un proyecto grande, con más recursos con roles más definidos si se puede justificar. TailwindCSS a mi personalmente me parece una maravilla en cuanto productividad. Hay otro punto que no habéis comentado y me parece muy importante sobre todo en cuanto a productividad, que es mobile first, y que su estructura de clases ya está pensada para para ajustarse a responsive y hacer variaciones fácilmente. Crear esa misma estructura sobre un css no es trivial ni suele ser rápido a no ser que sean un hacha en css, que también los hay. Por otra parte el 90% de los proyectos, y probablemente me quede corto, son proyectos pequeños y medianos, es una simple decisión de pragmatismo.
Hay que conocer los dos estilos y tener criterio para aplicar el que toque. También tener tus recursos con css para aplicar modificaciones haya donde tailwindcss no llega por defecto, un ejemplo claro son las sombras que ofrecen que son muy limitadas, en otras utilities.
me obligue por un tiempo a aprender tailwind y usarlo cada vez que desarrollaba con next, pero no me pudo convencer, al final me volvi para sass. Supongo que es costumbre de cada uno, pero yo ya tengo mi propio 'framework' con sass y una combinacion de smacss y bem, es basicamente una carpeta con todos los estilos que voy creando para mis proyectos, y va creciendo con cada proyecto nuevo. Al empezar uno copio la carpeta y elimino lo q no utilizo. Tiene escritos ya resets, mixins funciones etc. que uso siempre,. Por comodidad prefiero seguir asi, sass a mano.
Pero no es solo por loq no me pude acomodar a tailwind, la chorrera de clases me hace totalmente imposible ver la estructura de mis archivos, puse una extension que las colapsa, pero si queres editar una clase tenes mil dramas que si moves el cursor con el teclado se te colapsa solo y boludeces asi.
Podria llegar a usarlo como modulos dentro de los componentes para estilos especificos y usar sass para el estilo base que es lo reutilizo todo el tiempo, pero tampoco tiene tanto sentido asi me parece.
Pero mirando el lado bueno, un año con tailwind me ayudo a mejorar mi carpeta de estilos en sass, porque me traje muchas ideas de usarlo, agregue utility clasess de las propiedades que mas modifico por dar un ej.
Si tenes una empresa con 10, 20 , 30 de buen calibre programadores te podes dar un lujo de designar algunos a armar una arquitectura css y que se ocupen de mantenerla a largo plazo e irla documentando. Si sos una sola persona renegando con React, express/nextjs, mongodb / atlas, las versiones de git y ni hablar si necesitas replicar con docker.... y te apura el tiempo por derecha y por izquierda... Instalas tailwindcss y que sea lo que dios quiera pero te ahorras una largas horas de trabajo, que al fin y al cabo el cliente quiere el proyecto bonito, le da igual si es en sass, bootstrap o tailwindcss
no uso tailwind, a mi en lo personal no me gustan estas herramientas. Solo quizas podría ser útil para plantillas no funcionales que se necesiten sacar rápido, pero me cuesta ver el lado profesional en este tipo de herramientas, a primera vista solo encuentro un universo de malas prácticas.
Faltó el punto donde tailwind es mobile friendly, en arquitectura css hay que crear cada breakpoint mientras que en tailwind ya estan creados con adaptaciones, he heco proyectos en css puro pixel perfect y tailwind me ahorraría muchisimo tiempo (hablando de webs estaticas o medianas)
Usar tailwind no obliga a poner todas las utility-class en el html. Puedes combinarlo con BEM, css modules, post css y sigue siendo muy poderoso.
por el camino que va desarrollar en la web requerirá 100 librerias aparte de javascript ,css y html que es lo que finalmente lee el navegador.
o sea css con pasos extra 😂
Pero en tailwind puedes crear componentes y darle más semántica a los nombres de las clases. También si tenemos una arquitectura ya definida sería posible usarlo, no le veo mucho problema.
Además la legibilidad, simplemente si trabajas con React, Angular, Vue ..., puedes crear el componente con el nombre que te diga lo que hace el componente como (Alert), so, no le veo problemas.
exacto. Incluso hacer tus propias clases, ejemplo: .btn-primary {
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}
@@thelowlevelcode6790 El summum de la legibilidad 😄
completamente de acuerdo contigo, al parecer a estos dos señores les falta aprender tailwind 😂
Hay muchas maneras de trabajar CSS y cada uno se acopla, pero para mí tener una buena arquitectura con CSS es fundamental en un proyecto
Hay quien no se entera de qué va Tailwind, ¿en qué momento Tailwind les impide arquitectar su código con la estructura o nomenclatura que quieras? Todos los puntos que le han dado a su "CSS Artquitectado" es válido para Tailwind ya que lo puedes hacer también, vuelvan a contar y verán quien gana
Creo que tailwind es una buena opción cuando estas en una empresa que te apura con los tiempos de desarrollo y no podes tomarte el tiempo en darle semantica a tus clases
Pues en todas las empresas hacen eso jajaja
En mi opinion, lo mejor de Tailwind es que es mucho mas liviano que archivos CSS, porque las clases se reutilizan todo el tiempo, evitando el código muerto.
Si eso es bueno.
Hay algo que casi nadie ha nombrado y es la capacidad de refactorización a coste 0 que te da Tailwind. Pongo un ejemplo, muy muy común en mi día a dia. Empiezo por ejemplo un componente listado de usuarios de React, que pinta un listado con uuna cabecera y unas tarjeas de usuario. Escribes todo el HTML con utility clases. Luego te das cuenta que obviamente necesitas crear el componente " y seprararlo del . Solo tienes que hacer cortar y pegar, no tienes que preocuparte de los estilos, ni de anidaciones, ni de romper el BEM, ni nada. Es una refactorización gratis practicamente. Lo mismo digo cuando tienes que ampliar, modificar un componente. Con SASS, o BEM o una arquitectura similar, las cosas son más frágiles si no las cumples a la perfección, y en eso estoy de acuerdo que las buenas prácticas son buenas si se compluen al 100%. Si estás al 80% es mejor directamente usar otra alternativa.
No entendí, osea tailwind si es muy recomendable con React?
@@andresflg si lo es, precisamente por lo que he comentado. Aunque en proyectos muy muy grandes y con proyeccion de escalar mucho, usar una buena arquitectura CSS es bastante mejor, quiza reservar tailwind para cosas de layout, componentes de alto nivel como wrappers, contenedores
@@danielcabiscol1649 Buenas, soy nuevo en esto, hasta que tipo de tamaño de proyectos es beneficioso Tailwind, por ejemplo, hasta una red social tipo twitter o hasta donde?
@@JuanPablo.35n el mismo video dice que proyectos como una landing page, no tan grandes en dónde no tengas que leer tanto el código para hacerle mantenimiento
en el min 10:10 hacen referencia a lo que dices
Me encanta lo que están planteando. Muchas gracias ☺️
Me guta los títulos de los vídeos de Codely, muy llamativos para darle click y apreciar el vídeo completo y entender sus argumentos. Aunque la mayoría lo que hace es jusgar el título, ni siquiera ve el vídeo completo y comenta estupideces.
O sea te gusta el clickbait.
@@agustinsardon1904 gracias por comprobar mi teoría respecto a mi última frase
@@cerm88 Yo es que he aprendido a hacer descarte entre tanta propaganda. Entre el clickbait, que algoritmo no te da tregua, la infinidad de contenidos y la falta de síntesis, el aprender a hacer descarte o no cuanto antes puede ahorrarte mucho tiempo y esfuerzo inútil. En cualquier caso la crítica es necesaria, sobre todo cuando la proposición es tremenda. La devoción a los gurús tampoco me va.
@@agustinsardon1904 Lo amlo del este vído es que al parecer los chicos no conocen la directiva @apply de Tailwind. Porque allí le quitaron el punto y no es así, en Tailwind puedess escribir legiblemente también
A mi no me gustaba mucho la idea de las clases porque el codigo de vuelve dificil de leer, pero desde que lo empece a usar me encanta cada vez mas, es increíble lo rapido que puedes hacer las cosas y eso para mi es muy importante, ademas le instale una extension que esconde las clases cuando no las estas editando y me resolvio el problema de legibilidad del codigo.
Eso es lo bueno, porque jode tener que escribir para cada proyecto fondo blanco y texto negro, etc, etc. siempre lo mismo.
Solo expusieron argumentos de opinión personal, por lo tanto acerca de la mantenibilidad, y escabilidad y especialmente con Tailwind en un framework es tremendamente óptima.
No volvería a CSS vainilla A NO SER, que necesitara un diseño muy específico y que no pudiera lograrlo con Tailwind.
Para mi.... Gana de lejos Tailwind!
Una cosa no quita la otra, se puede usar Tailwind y seguir teniendo una buena arquitectura.
Tailwind se tiene que ver en dos fases:
La primera fase es la de prototipado, te pones a tirar HTML + clases de tailwind sin preocuparte de nada.
La segunda fase, una vez tienes el prototipo listo, es la condensación en clases. En la documentación oficial de Tailwind podéis ver la directiva @apply que sirve para que puedas copiar y pegar esas clases de forma literal y aplicarle un nombre semántico a la clase que crees.
El flujo de trabajo con Tailwind, una vez lo controlas, es maravilloso porque te permite construir sin cambiar de contexto y una vez enfrascado en cuestiones de maquetación, en ese punto, te importa más saber qué padding tiene a qué nombre tiene esa parte del componente. Luego le pones el nombre que toque y cuando haya que hacer ajustes se modifican las clases de tailwind, pero sobre el @apply.
pero si haces una condensación en clases, creo q se parecería a que escribieras una clase con sus estilos css. Lo único de ventaja sería la adaptabilidad al responsive.
Interesante, pero no se debería haber paso 2, es innecesario, da mas trabajo al desarrollador.
Yo lo he visto sin el @apply y más con utilidades con cva, cn. De hecho el desacoplamiento en cualquier decisión de CSS es bien trabajoso devolverse.
Yo comencé con CSS puro, después pasé por Bootstrap y ahora el tailwind me encanta. Creo que da velocidad de desarrollo, mantenibilidad y gestionar el responsive es super fácil. A parte puedes crear componentes y reusarlos como mismo lo haces con css.
Lo mismo que vos, comence con CSS puro, Bootstrap.. luego cree mi propia libreria, se parece un poco a Tailwind. Pero mi libreria no escribe los estilos, los lee directamente Javascript en la memoria del usuario.
Lo mejor es re-usar el codigo de un bloque por ejemplo. Con CSS puro si intentas eso, solo copias el bloque, pero luego tendrias que manualmente buscar las clases uno por uno para ver cual utiliza, eso es un tortura.
@@leonardocurbelobetancort430tailwind es como bootstrap?
@@ivanser1233 Se parecen mucho.
@@leonardocurbelobetancort430como se llama tu librería? Está en github? Gracias
puedes combinar ambos tailwind tiene el utility @apply que al usarlo con una buena arquitectura css te facilita mucho el trabajo la cuestion no es elegir uno sino fucionar ambos esa es la clave del exito y te facilita mucho el trabajo dado q aplicar un shadow o ciertas cosas que tienes q escribir demaciado en css con @apply son pocas lineas de código y mucho más rápido el desarrollo
En cuanto a la semántica TW no te impide usar naming clases
En Tailwind se pueden usar las directivas para poner varias propiedades de tailwind a una clase de css y reutilizar, pudiendo usar metodologias como BEM con tailwind, de este modo mejorando la legibilidad, y que sea mas facil de mantener. De todos los frameworks de css es lo mas cercano a escribir css puro.
Entonces es mejor hacerlo en CSS.
para que malgastar tiempo en arquitecturas complejas de css, tailwind te da la simplicidad que necesitas y las integraciones, puedes usar ambos si deseas, y tienes directivas como @apply para extraer esos estilos, ademas del responsive, dark-mode, purge css y muchas utilerias para ser mas ágil
las clases de utilidad son brillantes, hoy en dia todo se divide en componentes entonces tiene todo el sentido de que ya no se aplique css en cascada. y sean pequeñas clases que se usaran en pequeños componentes.
ademas Tailwind viene con medidas que son estandar del diseño UI.
Considero que tienen muchos puntos a favor en su hipótesis si es que todo fuera como el mundo ideal. En mi caso que armo cientos de landingpage al mes (por lo que toco bastante css), el problema que le veo a las clases "semanticas" es que siempre termina pasando que se crea css anidado que es bastante cansado, sobre todo porque lo hace in reutilizable.
Ahora mismo me tocó meter manos en un proyecto grande donde ya estaba escrito la base del css con "arquitectura css" y la metodología BEM y pasa que hay un montón de css redundante o css que no puedo re utilizar porque depende de un componente padre, y con tailwind o esta idea de los "helpers o clases de utilidad" es que me evito estos problemas, me evito problemas de scope o que algún estilo pise a otro, o no poder re-utilizar componentes css y en velocidad les puedo asegurar que no es mentira y si se gana mucho, a veces tengo que sacar durante un mismo día como hoy más de 20 landingpages y con arquitectura css no podría ni en mis sueños,
wow interesante tu opinión, lo tomaré en cuenta. Por cierto, en que empresa trabajas, amigo? porque te dedicas a crear bastante landing pages?
@@alessandro.fit9 trabajo en un retail de tecnología que vende productos de todas las grandes marcas, apple, samsung, nvidia, etc .. y mi labor es implementar los landings de productos o landings de contenido u otros proyectos que van saliendo siempre enfocado en el front y más que nada en el css
El problema no es el CSS, si no la mala utilización de el, no porqué algo sea semántico significa que esté bien hecho
@@santiagocalero-kr8inyo pienso que el nombre las clases en css no tiene porque ser semantico, si no las etiquetas html.
En este video se compara Tailwind mal utilizado con un html+css utilizado en el modo más avanzado y experto que existe. En el ejemplo del alert, se compara el html lleno de clases con un html con pocas clases, pero... se ven igual? no se ve igual.
También ignoran que Tailwind se usa mejor y queda más prolijo al trabajarlo con componentes reutilizables (con Astro, Svelte, React, etc)...
Es como si hubieran creado un curso de CSS y no superan como vendertelo 🤔...
en la empresa en la que trabajo. usamos Tailwind en un proyecto de React; prefiero guardar todas las clases en arrays para mantener limpia la sintaxis del return()
como haces eso bro?
Os habéis dejado la parte buena de Tailwind: el @apply, con eso + BEM creo que quedas bien cubierto
En un mundo ideal donde uno hace sus proyectos con todo el tiempo del mundo puede funcionar el no usar Tailwind y ponerse todo mega purista, pero la verdad es que las empresas te corren a latigazos para desarrollar y no hay tiempo de andar diseñando arquitecturas hasta para el estilado, necesitamos algo que sea bueno, práctico y esté super testeado, acorde a los tiempos que corren. Y no es incompatible con CSS propio.
La mayoría de nosotros no tenemos un emprendimiento propio, trabajamos para otros, por eso el tiempo de prototipado y desarrollo es super importante.
Gracias por el contenido.
Me quedo con tailwind. 13 años desarrollando.
Entiendo la situación que proponen pero les cuento que yo puedo usar design tokens en el constructor de tailwind config y se puede hacer un async sin problemas ya sea desde una api o ya sea desde plugins de firma
Tailwind tiene muchos problemas que resuelve yendo en contra de su premisa: creando classnames semánticos. Como comentaba el tweet: están a punto de entender cómo funciona css.
Sin embargo Tailwind no es una mala opción, pero hay que tener en cuenta los asteriscos, en mi opinión:
- Si no tienes un diseñador que te pasa diseños y tú tampoco quieres preocuparte demasiado de la interfaz, puedes usar Tailwind.
- Si vas a utilizarlo dentro de un framework que dispone de componentes o algún mecanismo que te ayude a agrupar código para evitar repetirlo, puedes usar Tailwind.
- Si vas a hacer una app y el objetivo es hacerla ligera y pequeña, puedes usar Tailwind.
- Si no sabes CSS y te da pereza implicarte en entender cómo funciona, puedes usar Tailwind.
Ahora bien, decir que usando Tailwind puedes hacer maquetación sin saber CSS es, cuanto menos, osado. Siempre que se dice que las clases son autodescriptivas se olvidan de mencionar que "flex" sólo tiene sentido para alguien que sabe lo que es "flex".
Una cosa que me gusta mucho de Tailwind es la postcompilación que elimina las clases que no estás usando. ¡Muy interesante! Pero siempre me he preguntado: ¿qué pasa con las clases que estás utilizando generadas dinamicamente?
En definitiva, menos hate y menos hype con las cosas y a utilizar las herramientas en su medida! No existen soluciones mágicas ni perfectas. Todo tiene su lado positivo y negativo.
Muy buenos puntos, yo se bastante css pero me inclino mucho mas por usar tailwind ya que te da un cierto patrón de diseño que simplemente funciona, no tienes que preocuparte tanto por cuantos pixeles o rems vas a poner de padding a cada elemento, o como combinar colores para que se vean bien
Para alguien que no es tan bueno diseñando te quita mucha carga de encima y te permite hacer interfaces bonitas
Buen punto. En cuanto a la clases dinámicas, puedes hacer que se mantengan siempre en la postcompilación, especificándoals en el archivo de configuración.
Yo prefiero muchas veces CSS a TW pero TW tiene muchas ventajas y no son solo de hacer un componente mas rapido, por ejemplo la postcompilación que elimina las clases que no estás usando, eso no lo puedes hacer con ninguno de los sistemas que nombraron, lo otro es Github no usa TW usa bootstrap o algo propio, porque los "border-top" no son de tw, tw usa "border-t" y aparte que todas las variables con tailwind llevan el prefijo --tw si mal no recuerdo
el prefijo --tw es opcional
@@tongadall pero igual las clases no son de tw
Claro que puedes con postcss
La legibilidad y la mantenibilidad se la dan usando componentes puros pequeños y usando la extensión inline fold en vscode, bien pro que se siente programar con tailwind
Voy a adoptar esa arquitectura. Me gusta
tailwind con la extension inline fold es una maravilla
Bootstrap supuso un gran cambio en su momento, de eso no hay duda, pero Tailwind también ha aportado algo interesante que en realidad bootstrap ya tenía (text-center, text-right, lead, visible-xs, etc.) son clases de bootstrap y de hecho son utility-classes. El aporte al mundo de Tailwind ha sido definir el concepto de utility-classes y ahora todos entendemos qué son y con ese conocimiento lo podemos aplicar a nuestros proyectos sin tener que usar los frameworks en sí. Personalmente, suelo usar una pequeña arquitectura en SCSS y cojo los componentes de bootstrap necesarios para su grid, solo el grid, que me sigue encantando a día de hoy. Después utilizo mis propias utility-classes: text-center por ejemplo es una indispensable, también una para flex, text-sm, text-md, text-lg, etc para tamaños de letra y por último, para espaciados, márgenes y demás, lo mejor para mí es definir un "gutter" y luego tener clases tipo: ma-bottom-sm, ma-bottom-md, etc. y todo eso son utility-classes. Además de las utility classes, está lo que habéis comentado de ripple, que yo llamaría "preseted components" o algo por el estilo, a ver si otro proyecto grande define el concepto para la comunidad. En resumen: totalmente de acuerdo con vuestra filosofía para elaborar la parte CSS de los proyectos. Lo mejor es entender la esencia y coger lo que realmente necesites para tu proyecto y como te sientas más cómodo desarrollando y de este modo, también haces que tu código perdure más en el tiempo. Bootstrap no se por qué versión irá pero yo sigo usando el grid de la versión 3 a día de hoy, no necesito más y lo controlo al 100%, al final eso tiene más importancia, sentir que controlas tu proyecto. Gracias por el vídeo seguid así!!
Pero la version 3 de bootstrap sigue usando float. Que curioso. Concuerdo que bootstrap era genial y lo sigue siendo en realidad.
Bootstrap está en la versión 5, y francamente no ha cambiado mucho aparte del hecho de haber removido el jquery de su código y reemplazarlo con js vanilla, facilitando su uso con los frameworks actuales.
Me he llevado un susto de la hostia con el sonido en el 4:40. Estaba de chill escuchando la dulce y melosa voz de Rafita y de repente suena eso.
si no me equivoco con tailwind se podian crear variables que reutilizaran esas utility y que el codigo quede tanto ordenado y poco invasivo como reutilizando todo como es propio de tailwind es mas que nada saber utilizar bien bien el tailwind, creo que no han explorado al 100% el poder de tailwind al principio tiene sus trabas pero cuando los ves bastante ves que es muy poderoso
Pregunta. ¿Quién tiene un proyecto en producción que no use un framework frontend como React o un template system como rails o Laravel?
Nadie. Luego el componente está en el código no en el CSS.
Tailwind se escribe una vez y El developer consume componentes React or partials Rails o Laravel
No uso Tailwind, no uso Foreign Keys, ... Mira que os gusta la gresca jejejeje
En los motivos está la diversión!! 😂
Su punto de vista sobre tailwind css es muy buena y conlleva a mejorar en todo aspecto al momento de usar una arquitectura frontend y tambien apostaria por CSS nativo, pero muchas veces la realidad en cuanto a tiempo y costo frente a la espectativa del cliente o empresa por mas grande el proyecto que sea, limita un poco darse el lujo de aplicar esas buenas practicas que a la larga vendran nuevos integrantes o requerimientos al proyecto que ensuciarán a la larga todo el trabajo o concepto inicial por mas documentado que esté, en mi experiencia me parece muy subjetiva su evaluación, basado en esto que les comento hay mucha más ventaja en realidad usando tailwindcss por su versatilidad, optimización, refactorización y reutilización de codigo que a nivel de trabajo en equipo, se podria mantener un standard mas estable en códificación o desarrollo del front, es mantenible a la larga, aplicar el metodo BEM con sass y sobre todo tenerlo a todo el equipo alineado sin la dependencia al 100% del equipo frontend en un proyecto muy grande, y mas bien abre las puertas para que todos trabajen en mejor ritmo, creando o mejorando nuevos skills en los desarrolladores a nivel Fullstack, optimiza trabajo, costos y con buen output file optimizado para prod. creo que ambos conceptos de trabajo se podrian fusionar Arq CSS usando el FW Tailwindcss y lo mas cool es que mejora la comunicación en convención de forma standard con el equipo de diseño UX/UI tambien se basaría en tailwind para armar los patrones de diseño compatibles y con una facilidad para implementar que no se imaginan. (lo que no se pudo lograr con bootstrap, RIP Bootstrap!)
Muy buen video! Porque pone de relieve cuestiones importantes de pensar. Me da la idea de que ambos enfoques tienen su lugar y su sentido.
Por ejemplo, esta aproximación:
Aplicar arquitectura de CSS como lo sugieren aquí, un preprocesador como Sass (para dotar a CSS de funcionalidades similares a un lenguaje de programación) y PostCSS (que es lo que utiliza Tailwind por debajo al optimizar) para reducir el código final.
¿Estoy equivocado en este enfoque? ¿Sobraría usar el preprocesador? ¿Si se utiliza una muy buena arquitetura CSS no sería necesario el PostCSS?
Tailwind es mejor por la curva de aprendizaje y tambien se puede agregar semántica con los componentes personalizados lo que hace css pero más rápido
Tailwind+buena arquitectura de componente, hacen que puedas tener los estilos muy cerca del código que estila y facilita su personalización
Claro no tienes que estar cambiando de ventana cada vez entre el HTML y CSS.
usa css in js, o emotion
Porque solo usas bootstrap
17:47 Como que por eso debe tener documentación el código y además se pueden crear componentes individuales para tener mas legibilidad, en este caso no creo que el componente Cookies_banner.jsx sea un articulo de la tienda o un Navbar, digo yo.
excelente video
Se que son una eminencia uds en España pero en este tema si estoy totalmente en desacuerdo con uds. Saludos desde Guayaquil Ecuador
Podrías compartir en qué puntos no estás de acuerdo? Gracias! 😊
Con tantos por que no uso, falta que hagan el por que no uso computadora! jajajajaja
Poco a poco llegaremos a ello xD
Yo trabajo con Laravel y tailwind css y veo un enfoque muy profesional en ello ya que tiene tambien sus buenas practicas y como en todo tambien existen malas practicas, creo que laravel si es escalable aunque obviamente no se hara un facebook con ello, pero sirve para una gran cantidad de proyectos empresariales y taildwincss ahorra muchisimo tiempo de trabajo, ya que los sistemas empresariales (software interno de la empresa) no requiere mucha complejidad en el disenio. Aunque para ser honesto en laravel quedaba mejor su uso con bootstrap.
Mas allá que también tengo mis dudas con Tailwind, lo he usado en algunos proyectos y me ha gustado mucho. Hay unas caracteristicas poderosas y únicas de tw que no se analizaron, como el uso de @apply para crear clases mas semánticas y utilizar esas en el html. También el hecho de con unos settings simples en un yml, TW puede generar miles de clases utilitarias automáticamente a nuestra medida, y lo mejor que luego puede rastrear las que se utilizan y que solo queden esas, reduciendo mucho el css final.
Concuerdo! Venia a comentar eso justamente. Le dieron con un palo sin conocer realmente la herramienta. Aparte el hecho de no utilizar media queries te ahorra un monton de tiempo y de codigo enredado.
@@Murzbul claro, si juzgaron un poco duro y sesgado jaja. Hay q seguir usando tw y atento a las nuevas características q van sacando.
Un punto importante tambien es que si tailwind se actualiza a una major y rompe cosas, la que tienes que liar en un proyecto ni te cuento....
Recomiendan comprar el TailwindUI? vi que existe uno para estudiantes no se si cubra todos los beneficios...
Nop, aprende a crear los componentes de forma nativa aprenderas mucho mas o busca algun framework de ui que tenga tailwind de base
En mi caso lo uso mucho y si no existe alguna clase simplemente amplio sus css, y si no quieres usar un instalador simplemente utilizas el archivo 😉
Yo prefiero tailwind por encima de cualquier otro framework css, desarrollo mucho más rápido. Y más eficaz para usar con react.
Que es react
No sabía que Ro en la red enseñaba CSS
Nunca me gustaron las utility classes. Empecé usandolas hace muchos años y dejé de hacerlo. Empecé a trabajar de un modo más semántico, con componentes. Mi regla de oro es que si componentes de alto nivel necesitan código CSS es que algo está fallando... El caso es que hace no mucho probé Tailwind (porque hay que probar las cosas) y me gustó. No por como funciona (no me gustan las utility classes) sino por la tremenda cantidad de temas y contenido que existen y lo fácil que es hacerlos encajar. Esas son las dos cosas que me gustan de Tailwind: la comunidad y lo fácil que es implementar el dark mode.
Con esto, hace unos meses empecé a crear una librería de componentes en Angular utilizando Tailwind y la verdad es que me gusta. Los componentes ofrecen mucha semántica y todas las utility classes las empujo a lo que aquí llamais moleculas (mis componentes más pequeños). Los componentes superiores, en el poco CSS que usan, es para posicionar elementos (flex y poco más). Parece una tontería pero para alguien manco en diseño como yo, me viene genial poder traerme estilos de plantillas ya existentes. Así tomo lo bueno de ambos mundos.
Por último, uso @apply de modo que ni siquiera tengo que incluir esas clases en el HTML, sino en la hoja de estilos. Curiosamente lo que no compro es lo que venden, eso de ir más rápido. Mi enfoque es muy similar a CSS pero tomando elementos creados de la comunidad (como tailwindui.com, flowbyte, ... )
Copiar y pegar, por ejemplo, un elemento de un proyecto a otro, sin verificar ni contrastar ningún archivo css existente ni sus rutas ni la nomenclatura de sus clases ni ná de ná para no romper o sobreescribir algo, eso no tiene precio. El tiempo es dinero y para ganar tiempo hay que ser productivo.
Por fin un comentario nombrando esta gran ventaja
Esa es una gran ventaja copias el html y con todas sus clases ahi mismo, no tenes que escribir como pelotudo un fondo blanco y texto en negro, ¿Por que hacer esto tan repetitivo? Solo es CSS si al menos fuera Javascript, pero con los estilos no es necesario.
Tailwind promueve la componetización señores, HTML y Tailwind generar un componente único para ser utilizado en donde corresponda luego se el aplica funcionalidad con React, Angular, Vue. Es ultra mantenible cuando el proyecto está componetizado porque sabiendo qué componente se debe modificar vas directo allí y lo modificas, el componente es una plantilla que se va a repetir en donde sea que se utilice en la aplicación
Yo no use aun este framework pero creo que en los primeros 2 minutos los que hablan tampoco.
Al final resumiría que las buenas practicas no son más que recomendaciones de personas con mucha experiencia que se van sumando y forman una especie esquema o de marco de trabajo que en cierta medida garantiza que el codigo sea mantenible y escalable.
tailwind para trabajar solo, es lo mejor, ya trabajar con un equipo se requiere dejar varios constraints para que no se salga de control, sobre todo los devs junios que no conocen css avanzado... ademas construir un design system con tailwind es super cómodo de mantener
Muchas de las comparaciones no usan componentes, ahi obviamente Tailwind sale perdiendo ya que esta pensado para el desarrollo web moderno por componentes. Ahi pierden sentido las clases semánticas como .button o .card, en la misma documentación de React considera una mala practica usarlas y recomienda crear componentes en vez de dichas clases. Dentro del scope del componente, por ejemplo Button o Card no tiene sentido tener la clase .button o .card y toman mas importancia las clases utilitarias.
Con esto no estoy diciendo que Tailwind sea mejor que una buena arquitectura de CSS, pero que cada cosa tiene su lugar, si quieres hacer un proyecto y no tienes una arquitectura ya creada que puedas trasladar de un proyecto base al nuevo, Tailwind te ofrece un sistema bien pensado de inicializacion, tamaños, colores, fuentes, breakpoints, esto sumado a no tener que pensar nombres de clases y administrar archivos css te da una velocidad de desarrollo superior a cualquier otro sistema. Y es escalable en una arquitectura por componentes a pesar de lo que afirman en el video. Sin contar que el mantenimiento lo hace otro equipo, por lo que no necesitamos invertir recursos en actualizaciones.
Ademas se demuestra lo típico a la hora de criticar algo de forma subjetiva, que es no conocer lo que se esta criticando y solo ver la superficie ya que nunca se ha usado por prejuicios. Por ejemplo la directiva @apply permite hacer clases semánticas con clases utilitarias dentro, no hace falta instalar una libreria de componentes para eso como afirman en el video.
A mi tailwind me resulta muy similar a los estilizados inline.
Antes de tailwind, usábamos nuestras propias clases utilitarias y pasado años, el propio equipo de desarrollo ya ni se entera cómo se hizo porque se hizo muy rápido y no es mantenible, es horrible!!!. El problema que un mismo componente si lo haces con TW, pasado lo años si le das a dos desarrolladores frontend, gran posibilidad que cada uno lo interprente e implemente diferente, ya ni te digo si le pones un fullstack. La mejor decisión CSS invertido + BEM para los nuevos proyectos, pero necesitas una nivel de abstracción bastante alto para proyectos grandes, y eso te lo da la experiencia... Cuando veo el tailwind, me imagino de lo complicado que será mantenerlo. Posiblemente los que tiene proyectos nuevos será una maravilla porque está fresco y es el mismo equipo, pero pasan los años y envejece muy mal ... y ni Dios se entera porque se programó así.
Me encanto, la verdad es que muchas veces nos centramos en aprender un framework, antes de priorizar y aprender bien un lenguaje
si hay que agrupar clases de tailwind en uno solo para reutilizarlo, entonces no tiene sentido tailwind. Porque sera mas viable, menos cargado y menos pesado usar css simple en una simple clase.
Buenos los chicos quieren vender su curso de css por eso sus opiniones personales, perola realidad es otra del uso o no de tailwind ya que siempre va ser depende de.. ejm si se necesita sacar el producto rapido y en la empresa no se tiene un especialista frontend o el costo del proyecto no puede cubrir y solo se tiene un fullstack y el tiempo corre y corre entonces es valido usar tailwind
mezclo segun me convenga , llevando un orden lo mas facil de leer (en dos o tres meses sabes si valio la pena)
¿Ha válido la pena?
Porqué SI uso Tailwind CSS: Es altamente personalizable, Tiene patrones de utilidad comunes, Se puede optimizar utilizando PurgeCSS, Permite crear diseños responsivos complejos, No pierdes energía pensando en los nombres de las clases, No necesitas archivos CSS porque todo se trabaja en el HTML, Si haces un cambio en una página, no rompes el resto, Hay límites predefinidos: Que además Tailwind te permite modificar a voluntad en caso de que quieras establecer unos distintos o simplemente retocarlos; Flujo de trabajo rápido. Fácil de entender y utilizar si tienes conocimientos de CSS. Bien optimizado porque el CSS resultante está optimizado y solo genera las clases utilizadas. Buena documentación oficial. Se integra a la perfección con otros frameworks como React, Svelte o Laravel. Lleva más de 330 MILLONES de instalaciones! Por algo será...
Despues de pasar por Bootstrap y Tailwind y llegado a Sass css . No cambio Sass por nada.
al final no se complique y use bootstrap
Concuerdo con tailwind
Ok, para cuando curso de arquitectura con Tailwind usando DDD , CQRS ?
hahahaha
Interesante video, pero Tailwind si bien tiene a escribir mas facil los estilos en el HTML y bien reclaman que cuando son muchos estilos se te acumulan clases en una misma linea es un horror, pero hay otras librerias superiores a Tailwind en que usan el mismo enfoque pero que no es necesario anotar todo en una misma clase, si no mas arriba escrieb tus estilos y eligen por etiqueta, clase, Id o incluso atributo el estilo.
Ter?
El punto del acoplamiento lo argumento desde otro lado.
Si creas CSS por un lado y html por otro estás acoplando ambos. Si borras el html te quedas con CSS no usado en tu proyecto. Con tailwind al ir todo en el html no queda rastro si borras ese html
Así que el resultado final en mi opinión es tailwind 3 arquitectura css 0 😂
Si, es como tenerl los muslo y los huesos juntos, Nunca me gusto tener otra ventana con el CSS.
Me encanta tailwindcss
Yo solo vengo a decir que me llama la atención que ella esté de remera y el de buzo, gracias
En fin no usos Tailwind 😎 Tenemos este curso de buenas prácticas 😂😂
Ahora con la ayuda de chatGPT dar semantica a las clases siguiendo la metodologia BEM es mas facil. no te rompes mucho la cabeza como antes
Si necesitas realizar clases globales por que X propiedades se repiten constantemente en tu codigo CSS, chatGPT tu mejor aliado para un desarrollo mas rapido y fludio
para un novato como yo tailwind es dejar lo decorativo a lo último y concentrarme en el código... la semántica? le pongo comentarios y listo; después lo haré mejor con css cuando ya tenga la página andando como quiero
Exacto, no tiene porque tener semantica las clases, la semantica es para las etiquetas html.
Denle un ojo a PandaCss tiene lo mejor de los dos mundos ;)
KIT CSS, ATOMIC DESIGN Y BEM
Tailwind CSS para mi es lo peor que existe , prefiero boostrap , pero en banca crean su arquitectura Frontend propia y creo que es lo mas recomendable
Con Tailwind no necesitas naming, porque se acaba eso de tener a los programadores creando reglas especificas con nombres inventados en un archivo separado, no hay vida con Tailwind, sobre todo porque es mucho mas facil leer una larga linea de clases (sobre todo usando el intelisense) colocadas justo en el elemento que estan estilizando, que tener que matarse con toda la locura de especificidad, y selectores locos que uno no sabe ni mierda que coño termina afectando el elemento... no importa que hables de arquitectura, la gente termina no siguiendo esa vaina y en la realidad el CSS termina siendo un desastre...
El hecho de que a estas alturas casi todo se haga con sass da mucho que decir del css
Sass es el pasado. Tailwind es mejor, pero no lo uso, porque hay al mejor que Tailwind.
Porque dice butestrap?? Es buutstrap
Porque no tiene idea
Perdón pero IMHO está mal enfocado Tailwind en este video. Caen mucho en comparativas, todo el tiempo, de Tailwind vs otros frameworks; no lo veo así, no creo que sean comparaciones que conduzcan a nada. No hay nada que impida agregar Tailwind **con** bootstrap o material design; es más bien un maridaje perfecto.
Se consigue lo mejor de los dos mundos porque las customizaciones quedan explicitas en el HTML. Esto es clave.
Tampoco acuerdo con ventajas de Tailwind porque falta poner acento en lo importancia que tiene entender totalmente el comportamiento de un componente sólo mirando su código, sin necesidad de ir a revisar css o confiar en que que la descripción de la clase cusom coincida con lo que realmente hace.
Detesto tailwind. Me parece un martirio leer componentes con className de 12 clases diferentes
pues usa la extension inline-fold de VSCode, crear clases que agrupen otras, organiza y explita bien tailwind
Pero en CSS es lo mismo, a una clase le pones 12 atributos.
¿por qué no uso Codely? por seguirles el rollo jeje
Nadie lo usa
Menos mal que no soy el único al que le rasca el uso de tailwind, al final, si te casas con un framework, aceptas elecciones que alguien ha tomado por ti, y tarde o temprano eso va a ir en contra de tu arquitectura, imho, cuanto más cerca de la plataforma mejor. ¡Bravo por el vídeo!
La verdad tailwind me parece espantoso.
Y la botaron con Ripple UI, no tiene nada que ver eso que dices de que la gente de tailwind se esta dando cuenta del problema de legibilidad y estan dando la vuelta, por dios hermanos, tailwind es un generador de clases utilitarias, obvio que es bajo nivel y si quieres crear componentes enteros (como bootstrap por ejemplo) puedes hacerlo tu mismo usando la directiva @apply o mejor aun puedes usarte un plugin como Daisy UI que lo hace por ti.... creo que uds estan muy segados por el cambio inevitable
Osea mas gente cerrada, no terminan de entender que cosas como CSS plano o preprocesado es una porqueria si lo comparamos con nuevos aproaches mas modernos, como Tailwind + Unstyled components, Css-in-JS.... poco a poco ya no les va a quedar mas tema, porque incluso facebook finalmente publica su preferencia por CSS-in-JS al estar detras del desarrollo de StyleX que aseguro viene con todo
Che pero hace un año hicieron un video con Nuria de que tailwindcss era la mejor herramienta CSS para hacer diseño front end y bla bla bla. Que paso no les mandaron mas el sobre y ahora van a empezar a apoyar otro framwork ?! Mantengan una linea... Asi son creibles.
Te damos 3 meses gratis de Codely Pro si nos pasas enlace a ese vídeo 😬😬😬
Nunca nos ha patrocinado Tailwind. Y Núria justamente es bastante contraria a su uso.
@@CodelyTV Ya lo habrán borrado seguramente (risas).... Pero yo justo andaba buscando info de Tailwind y llegue a este canal y hablaron 1000 maravillas durante un video. Ahora veo que no...
@@CodelyTV fue una ironía... Pero lo del vídeo es cierto hasta me convencieron de empezar a usar Tailwind y es cierto que te salva las papas si estás solo. Si haces algo grande con todas esas etiquetas HTML es insostenible
No conozco mucho Tailwind pero por lo que he visto tiene varios inconvenientes. Obviamente puedes reutilizar las clases de utilidad, pero no puedes reutilizar los estilos que aplicas a un elemento. Es decir, si quieres aplicar los estilos que has aplicado a un elemento en otro elemento tienes que volver a poner la ristra de clases de utilidad en los dos elementos, no digamos en el caso de que sean estilos que quieres que apliquen a muchos elementos… mess. Eso es muy parecido a usar estilos en línea. Y siempre se ha dicho que no hay que usar estilos en línea precisamente porque no son reutilizables y porque es muy intrusivo para el html. Tengo entendido que a partir de clases de utilidad puedes diseñar componentes pero entonces ya te tienes que meter en el charco de css (especificidad y cascada) que parece que es de lo que se trata de evitar.
En cuanto a metodologías me gusta BEM precisamente porque intenta, en la medida de lo posible, tener especificidad plana. También me gusta SMACSS.
En cuanto a frameworks me gusta BULMA porque es modular (no te lo llevas todo o nada sino sólo lo que vas a utilizar). En ese sentido no es como Bootstrap. Y no es tan pesado como Bootstrap. En la versión 5 Bootstrap ya no trae jquery pero trae otras dependencias de javascript.
En tailwind puedes crear un componente que contenga todas las clases de utilidad que quieras. Como que tienes las clases "bg-red-500 p-2 rounded" y las puedes extraer en un componente llamado "btn-warning". Sin necesidad de escribir CSS. Solo aplicando las clases de Tailwind a esta nueva clase.
También lo que mencionas que no te llevas todo sino sólo lo que vas a utilizar. Tailwind hace lo mismo, cuando generas el css de producción, solamente se exportan las clases que utilizaste y no todas las del framework. Generando archivos CSS muy livianos. Y además, no genera ningún tipo de código de JS.
Claro que sí es reutilizable. Tailwind te provee de algunas directivas, la más usada es @apply, justamente para hacer lo que dices que no se puede
Tienes un menú y tienes las mismas 20 clases de utilidad en los mismo botones ? Pues usas @apply y ese lo aplicas a los botones y listo: HTML limpio con un componente reutilizable.
@@tatoElpaisa Pues si es así, mola bastante, porque lo puedes hacer orientado a componentes. Yo lo que había visto era una hilera de clases de uitilidad en las etiquetas de html y eso no me gusta. Pero si puedes agrupar clases de utilidad en un componente eso está genial.
@@agustinsardon1904 si le das la oportunidad y lo pruebas, "corres el peligro" de querer quedarte ahí (como me pasó a mi) jeje.
@@alejandroortega5657 Pero hacer un componente que contenga diferentes clases de utilidad asignándole un nombre más semántico no seria lo mismo que usar css???... para hacer eso, mejor usar directamente css, no?
Por cierto esa arquitectura CSS que muestran no es para nada agradable, no se compara con Tailwind + plugins o componentes sin estilos. Con tailwind no necesita uno toda esa paja de carpetas y archivos separados, hasta cuando vale, estilo separado en un archivo sucks shit
Malardo, tailwind ya tiene todo eso de lo que se queja solucionado
Muy sesgado su analisis, si les gusta CSS perfecto, pero no desinformen.
Es que no usaron Tailwid a fondo y se ponen a hacer video.
Primero
para usar tailwind, prefiero poner estilos inline, y no depender de ningun framework q atrasa 20 años
una pregunta real: has usado tailwind?
¿Que es estilos inline?
@@yungarepa si
@@leonardocurbelobetancort430
el tipico clic bait, a mi me gusta tailwind y se va a poner mucho mas de moda porque su uso aumenta
Por qué es clickbait?
Mi resultado final: Tailwind: 5 vs Arq CSS: 0
A los youtubers les encanta sembrar dudas jajajaja !!!! .... nunca hago caso a los youtubers ... solo le hago caso s mi propio éxito y/o fracaso