No he compartido una actualización de Tailwind UI desde que lanzamos la plantilla Protocol en diciembre, pero eso no es porque no hayamos estado ocupados.
Durante los últimos cuatro meses probablemente hemos trabajado más en Tailwind UI que nunca, y habiendo finalmente concluido lo que nos propusimos lograr, ¡estoy emocionado de exponértelo todo!
Commit: Una hermosa plantilla de changelog para tu próxima idea
Hace solo unos días lanzamos Commit, una nueva plantilla de changelog que diseñamos para Tailwind UI — construida, por supuesto, con Tailwind CSS y Next.js.
Los changelogs públicos se han convertido en una forma muy popular de mantener a la gente al tanto de en qué has estado trabajando, y de rendir cuentas y desarrollar tus músculos de envío. No son un concepto nuevo en absoluto, por supuesto, pero no creo que fuera hasta que Linear comenzó a publicar en su sitio de changelog que otros se entusiasmaron con usarlos casi como una alternativa a un blog de empresa.
Commit es nuestra versión del changelog de producto moderno, diseñado como un sitio web de una sola página que puede actuar tanto como la página de inicio de tu proyecto como un feed de todo en lo que has estado trabajando.
Como todas nuestras plantillas, está cargada de características y detalles que la convierten en un deleite para experimentar y un placer para trabajar:
- Soporte para modo claro y oscuro, porque no puedes hacer nada que un desarrollador pueda leer sin optimizarlo para leer a las 2 am con las luces apagadas.
- Estilos de tipografía hechos a mano, tamaños de fuente, espaciado, estilos de lista y más meticulosamente elegidos, diseñados específicamente para esta plantilla.
- Resaltado de sintaxis incorporado, impulsado por Shiki, y fácil de personalizar con unas pocas variables CSS.
- Experiencia de edición en un solo archivo, cada entrada vive en un único archivo MDX, por lo que actualizar tu changelog se siente tan ligero como actualizar un archivo
CHANGELOG.mden un proyecto de código abierto. - Hermosas animaciones y efectos, esta vez impulsados por Motion One, lo que lo convierte en un gran recurso para estudiar cómo realizar este tipo de trucos con una nueva librería de vanguardia.
Como siempre, es fácil meterse en el código y hacerlo tuyo — aquí solo hemos ajustado un puñado de colores y se siente como un sitio web totalmente diferente:
Echa un vistazo a la demo en vivo para la experiencia completa, y si ya eres el orgulloso propietario de una licencia de acceso total a Tailwind UI, descarga una copia de la plantilla para usarla en tu próximo proyecto o simplemente para estudiar el código fuente y aprender un truco o dos.
Rediseñando cientos de componentes para Tailwind UI
El diseño avanza rápido y, siendo que han pasado más de tres años desde que lanzamos Tailwind UI por primera vez, sentimos que merecía ser puesto bajo el microscopio y asegurarnos de que todavía se sintiera como nuestro mejor trabajo.
Nos sorprendió gratamente descubrir que sí, en realidad hemos mejorado en diseño en los últimos tres años, así que pasamos cuatro meses concentrados haciendo cada componente y categoría tan perfectos como pudimos con nuestros nuevos poderes.
Una vez que salimos de nuestra cueva para ver la luz del sol de nuevo, teníamos cientos de componentes rediseñados, docenas de ideas totalmente nuevas juntas y un lote fresco de ejemplos de páginas para mostrarlos todos.
Aquí tienes un resumen de algunos de los tipos de mejoras que hicimos.
Rediseño de patrones existentes que se sentían anticuados
Muchos de los patrones de componentes en Tailwind UI son ideas realmente atemporales, pero a medida que cambian las tendencias de diseño y nos convertimos en mejores diseñadores, las implementaciones específicas de esos patrones pueden empezar a sentirse como si fueran de otra época.
Revisamos todos los componentes uno por uno y encontramos muchos patrones a los que queríamos darles otra oportunidad e hicimos nuestro mejor esfuerzo para traerlos a 2023.
Echa un vistazo a la categoría Hero Sections para ver algunos ejemplos geniales de cómo se ven estos patrones actualizados.
Afinación de detalles sutiles en general
Muchos componentes realmente no necesitaban un rediseño completo tanto como necesitaban solo un poco de pulido adicional.
Revisamos toneladas de componentes haciendo mejoras sutiles en el espaciado, la tipografía y el contraste, y los resultados simplemente se sienten mucho más nítidos y limpios.
El ejemplo anterior es de la categoría Description Lists — échale un vistazo allí si quieres verlo en todo su esplendor renderizado por el navegador.
Diseño de una tonelada de nuevos ejemplos
Mientras revisábamos todos los componentes existentes, seguíamos teniendo nuevas ideas que sentíamos que faltaban en el conjunto original de patrones.
Así que diseñamos toneladas de componentes nuevos, tratando de llenar tantos huecos que nos llamaron la atención como pudimos.
Muchas categorías más que duplicaron su tamaño, como la categoría Feature Sections, que está cargada de ideas nuevas realmente geniales.
Adición de más variaciones oscuras
Parece que casi todos los sitios web nuevos que veo en estos días son oscuros por defecto, así que sentimos que teníamos la obligación moral de darte algunos ejemplos más optimizados para fondos oscuros.
Uno de los ejemplos que realmente me gustan son estas nuevas insignias oscuras — no hay mucho en ellas realmente, pero ese poquito de opacidad en el color de fondo es un efecto tan agradable para los diseños oscuros.
Ejemplos de páginas totalmente nuevos
Finalmente, tomamos todo esto nuevo y juntamos un montón de ejemplos de páginas totalmente nuevos para mostrarlos, incluido el ejemplo de UI de aplicación que todo el mundo nos ha estado pidiendo a partir de las capturas de pantalla en algunos de nuestros componentes de marketing.
Echa un vistazo a la categoría actualizada Home Screens por ejemplo para ver algunos de estos nuevos diseños.
Así que ahí lo tienes, sin duda nuestra mayor actualización de Tailwind UI de todos los tiempos. Hemos estado goteando estas mejoras lentamente desde enero y todo está capturado en el changelog de Tailwind UI so check that out if you want to dig in to what's changed in more detail.
Lo siguiente para nosotros — profundizar en un montón de ideas que tenemos para Tailwind CSS v4.0, y explorar nuestro primer kit de inicio de aplicación Next.js. ¡Emocionado de compartir más en las próximas semanas!