Por qué no uso 'Tailwind CSS' en mi código

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.

﹤🍍﹥ CodelyTV

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

[CodelyTV]

¿Usas Tailwind en tu día a día? ¿Crees que nos hemos dejado algún punto interesante por tratar? 🙂

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.

[Ktalesun]

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.

[sergiobermudez]

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.

[egan]

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

[danielcabiscol]

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 "<User/> y seprararlo del <UserList/>. 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.

[parmesanogood]

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.

[__rogm]

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

[efrainlosadaleon]

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.

[aincatoni]

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,

[gervisbermudez]

En cuanto a la semántica TW no te impide usar naming clases

[cerm]

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.

[RubenMartinez-qpgg]

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.

[dolaya]

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

[angelnapolesnapoles]

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

[davidjacobs]

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.

[aritzolaba]

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í!!

[franlendinez]

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.

[rapustin]

Me encanta lo que están planteando. Muchas gracias ☺️

[ShrinerAnezeh]

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()