tailwind CSS v4.0: el cambio de juego definitivo para el desarrollo web moderno [artículo traducido]

• La característica más importante de la v4.0 es la mejora de rendimiento: los builds completos son hasta 5 veces más rápidos y los builds incrementales son más de 100 veces más rápidos
• Cambio de paradigma con una configuración centrada en CSS: ahora se configura directamente en CSS en lugar de tailwind.config.js
• Control de la prioridad de estilos usando @layer
• Posibilidad de definir propiedades personalizadas con la regla @property
• La función Color-Mix() permite ajustar la transparencia de cualquier valor de color en CSS, incluidas variables CSS y currentColor
• En lugar de margin-left y margin-right, ahora se pueden usar propiedades lógicas como margin-inline para resolverlo de una vez, lo que hace que el soporte RTL sea mucho más sencillo
• Proceso de instalación simplificado: npm i tailwindcss @tailwindcss/postcss export default { plugins: ["@tailwindcss/postcss"],}; @import "tailwindcss"; y listo
• Detección automática de contenido: ahora ignora automáticamente .gitignore y binarios como imágenes o videos, y escanea automáticamente los archivos relevantes. Soporta @source para excepciones
• Soporte prioritario para el plugin de Vite
• Con generación dinámica de utilities, ahora es posible usar de inmediato valores que no existían en la configuración previa
• Sistema de color evolucionado: toda la paleta de colores predeterminada se actualizó de RGB a OKLCH
• Container Queries integradas en el framework
• Soporte para transformaciones 3D y gradientes mejorados
• Incluye nuevos Variants y Utilities: not-*, starting, inert, nth-*, variante descendant y utilities field-sizing, color-scheme, inset-shadow-*
• Migración más fácil de lo esperado: la mayoría de los cambios se pueden actualizar automáticamente
• La visión amplia que propone tailwind: más que una simple actualización del framework, un desafío audaz hacia el futuro de CSS
• ¿Deberías actualizar? : si es un proyecto nuevo, elige v4.0. En proyectos existentes, si el servicio apunta a navegadores modernos, se puede actualizar fácilmente
• Conclusión: tailwind CSS v4.0 no es una simple evolución, sino una revolución

[labeldock]

Después de aplicar Tailwind y usarlo durante un año
¿Lo usaría en el siguiente proyecto? SÍ
¿Es un cambio de juego para el desarrollo web? NO

La expresión "cambio de juego" me parece exagerada, así que quise dejar un comentario.
No creo que se pueda afirmar con facilidad que sea el estilo progresista al que deberíamos apuntar de ahora en adelante.

Tailwind tiene ventajas para copiar y pegar plantillas, generar cosas fácilmente con IA y hacer ajustes simples de estilo, pero

hasta etiquetas fáciles de leer terminan volviéndose difíciles de interpretar, y también es complicado reproducir con precisión un diseño hecho por un diseñador. También pienso que, si defines bien las variables de CSS, no hay una gran diferencia en dificultad frente a los estilos inline.

[bluekai17]

Por favor den soporte para RN..

[iolothebard]

No vayas demasiado lejos… Podría tragárselo todo…

[ng0301]

Por ahora usaré la 3.x y, si de verdad se vuelve la opción dominante, probablemente migre.

[savvykang]

https://tailwindcss.com/docs/upgrade-guide

• shadow-sm -> shadow-xs
• shadow -> shadow-sm

En la próxima versión ya ni se puede predecir qué compatibilidad van a romper.

[cocofather]

Siguen.salendo.sin.parar.las.tecnologías.web.
Con.las.tecnologías.que.ya.existen.es.más.que.suficiente.
Con.solo.C.assembly.HTML.y.JavaScript.se.puede.hacer.todo.

[bokjjang]

¿Todavía eres de los que no usan las “funciones” de Excel?
Con una calculadora también se puede hacer todo.

Entonces, ¿por qué usan puntos en lugar de espacios?

[mse9000]

Es parte del estilo boomer humano. Parece una parodia de que la gente mayor suele escribir puntos con frecuencia en lugar de dejar espacios..

[codemasterkimc]

Sr. Kim. Hay algo que me atrevo a aconsejarle. No es otra cosa que esto: por favor, no use tanto las funciones de Excel... Si hay comodidad, también aumenta el riesgo. Para matar una vaca hay una hoja acorde, pero ¿hace falta un cuchillo para atrapar una gallina? Lo más simple puede ser la respuesta correcta.

[swooooooo]

jajajajaja, está demasiado gracioso

[illiil1lii]

Los proyectos existentes pueden actualizarse fácilmente si el servicio está dirigido a navegadores modernos.

😅

[ahwjdekf]

Dicen que es simplificación y una mejora, pero al final solo es otra cosa más que aprender. Eso es todo.