El mes pasado, más de 200 personas se reunieron en mi ciudad natal de Cambridge, Ontario, para pasar el rato, hablar de trabajo y echar un vistazo tras bambalinas a algunas de las cosas nuevas en las que hemos estado trabajando.
Tailwind Connect comenzó como una idea para organizar una pequeña reunión local mientras el equipo estaba en la ciudad, pero naturalmente se convirtió en alquilar un salón enorme, contratar un equipo de cuatro videógrafos y acumular una factura de catering que dejó en ridículo a mi propia boda.
Pero aunque nos excedimos un poco con la producción, realmente intentamos que se sintiera más como una reunión que como una conferencia en toda regla. Realizamos el evento por la noche y lo limitamos a una sola presentación, dejando el mayor tiempo posible para que la gente simplemente pasara el rato y se conectara con pizza y cerveza.
Originalmente esperábamos que fuera un evento principalmente local al que la gente iría en coche después del trabajo, pero casi la mitad de las personas que asistieron viajaron en avión para llegar aquí. Así que para ayudar a todos a aprovechar al máximo su tiempo aquí, creamos un servidor de Discord para el evento para que las personas que viajaban pudieran hacer planes entre sí, y alquilamos el patio del Foundry Tavern al lado del espacio del evento por la tarde para dar a la gente una razón para reunirse temprano y hacer nuevos amigos.
Abrimos las puertas del evento alrededor de las 5:30 pm y comenzamos la noche con una recepción de apertura de una hora, donde la gente podía pasar el rato, hablar y disfrutar de algunos canapés.
Un detalle que pensé que realmente clavamos fueron las insignias — cuando comprabas una entrada te dábamos un campo básico de markdown donde podías escribir lo que quisieras sobre ti que pudiera ayudar a la gente a iniciar conversaciones interesantes contigo.
Me encontré mirando las insignias de todos toda la noche y fue una forma increíble de romper el hielo inmediatamente y tener algo de qué hablar.
Alrededor de las 6:30 pm todos tomaron asiento para la presentación principal. Comencé con un poco de historia sobre Tailwind CSS como proyecto y cómo llegó a donde está hoy.
Hace seis años eran solo un par de hojas de estilo que copiaba y pegaba de proyecto en proyecto. Hoy se descarga más de 25 millones de veces al mes por millones de desarrolladores, y es utilizado por algunas de las compañías más grandes del mundo para construir algunos de los sitios web más grandes del mundo. Fue realmente especial para mí tener finalmente la oportunidad de celebrar lo lejos que hemos llegado en persona con tanta gente de la comunidad.
Después de eso, Sam Selikoff repasó algunas demos brillantes mostrando algunas de las características nuevas más geniales de CSS. Hizo demostraciones de cosas como color de acento, tipografía fluida, equilibrio de titulares, container queries e incluso masonry grid, todo usando Tailwind CSS y el flujo de trabajo utility-first.
Sam es un amigo increíble, le pedí que viniera para el evento y fuera parte de la presentación principal sin tener realmente un plan de lo que le iba a pedir que hiciera, y preparó toda su presentación en unas 36 horas después de llegar y lo clavó absolutamente. Sin diapositivas, todo codificación en vivo, y lo hizo como un profesional. Recomiendo encarecidamente su canal de YouTube y su sitio de formación Build UI — el tipo es un maestro fantástico.
A continuación, di un vistazo a Oxide, la próxima evolución del motor de Tailwind CSS.
Oxide consta de muchas piezas diferentes, pero todas se reducen a dos objetivos — rendimiento mejorado y simplificación de la experiencia del desarrollador.
Estamos haciendo de Tailwind una herramienta de procesamiento CSS más todo en uno integrando Lightning CSS, lo que significa que en la próxima versión de Tailwind, cosas como importar otros archivos CSS, anidamiento, prefijos de proveedor y transformaciones de sintaxis para futuras características CSS simplemente funcionarán — sin necesidad de instalar o configurar ninguna herramienta adicional como autoprefixer o postcss-import.
Lightning CSS está escrito en Rust, lo que lo hace extremadamente rápido, y nosotros también estamos incursionando en Rust reescribiendo algunas de las rutas más críticas, como escanear todos tus archivos de plantilla en busca de nombres de clase.
Con estas mejoras, estamos viendo que los tiempos de compilación disminuyen en más del 50% en proyectos del mundo real, reduciendo el tiempo de compilación de producción a alrededor de 150 ms incluso para nuestros proyectos más grandes.
Oxide también traerá una experiencia de configuración simplificada. Estamos agregando detección automática de contenido para que ya no necesites configurar las rutas a todos tus archivos de plantilla, y haciendo que sea aún más fácil agregar Tailwind a tu propio CSS reemplazando la necesidad de todas las directivas @tailwind con una simple llamada @import "tailwindcss" en la parte superior de tu archivo CSS.
También compartí un vistazo muy temprano a una idea que estamos explorando para configurar Tailwind CSS directamente en tu archivo CSS en lugar de en JavaScript. Con configuración basada en CSS, detección automática de contenido y la historia de importación simplificada, configurar Tailwind con algunos colores y fuentes personalizados podría verse tan simple como esto en el futuro:
@import "tailwindcss";@import "./fonts" layer(base);:theme { --colors-neon-pink: oklch(71.7% 0.25 360); --colors-neon-lime: oklch(91.5% 0.258 129); --colors-neon-cyan: oklch(91.3% 0.139 195.8); --font-family-sans: "Inter", sans-serif; --font-family-display: "Satoshi", sans-serif;}Estamos planeando introducir todas estas cosas sin cambios disruptivos, y muchas de estas mejoras (incluida la integración de Lightning CSS y nuestro analizador de plantillas basado en Rust) estarán disponibles en Tailwind CSS v3.4 en los próximos meses.
Definitivamente escribiré sobre estas cosas con mucho más detalle cerca del momento del lanzamiento, pero mira la presentación principal si quieres echar un vistazo más de cerca antes de eso.
Cerramos la presentación principal con una vista previa de Catalyst, el nuevo kit de UI de React en el que hemos estado trabajando desde finales del año pasado.
Esto es algo que ha estado en nuestra hoja de ruta durante dos años en este punto, y después de muchos meses de pulir el mejor enfoque, finalmente comenzamos a trabajar en él en octubre pasado.
Catalyst es un sistema de componentes con todo incluido con APIs cuidadosamente diseñadas, e incluye todos los bloques de construcción básicos que necesitas para construir tus propias aplicaciones. Incluye cosas como botones, controles de formulario, diálogos, slide-overs, tablas, menús desplegables y más.
La mayor diferencia entre Catalyst y nuestros ejemplos existentes de componentes de UI de aplicación es que los componentes en Catalyst están todos conectados como estarían en un proyecto real, en lugar de ser fragmentos de código aislados para copiar y pegar.
Pero al igual que con nuestras plantillas de sitio, el código en Catalyst es tuyo. Si quieres ajustar algo, simplemente abres el archivo y lo ajustas — no es una librería que instalas a través de npm.
Piénsalo como un punto de partida para tu propio sistema de componentes. Descargas la última versión de nosotros, copias el contenido del directorio /components en tu proyecto y luego comienzas a construir.
Si necesitas cambiar algo, cámbialo.
Cuando quieras crear tus propios componentes nuevos, créalos.
La idea completa es que 6 meses después la base de código se sienta tan tuya que casi olvidarás que la iniciaste con Catalyst en primer lugar.
Después de presentar el proyecto y dar a todos un pequeño recorrido, le pasé el relevo a Steve Schoger, quien hizo un trabajo increíble recorriendo todos los pequeños detalles de diseño que contribuyeron a que Catalyst se sintiera como un sistema de diseño tan pulido.
Terminé mostrando un par de trucos avanzados de Tailwind CSS que tuvimos que usar para implementar algunos de esos detalles de diseño, como cómo implementar transiciones Responsive con Framer Motion usando variables CSS y la función de propiedad arbitraria de Tailwind.
Catalyst todavía es un trabajo en progreso, así que no me tomes la palabra, pero con suerte tendremos una versión temprana y más detalles para compartir con los clientes de Tailwind UI en el próximo mes más o menos.
Durante las siguientes tres horas pudimos pasar el rato en el espacio del evento disfrutando de algunos refrescos y conociendo a todas las personas que hicieron el viaje para asistir.
Lo mencioné en la presentación principal, pero esta fue la primera vez en la historia del proyecto que reunimos a un grupo de fanáticos de Tailwind en la misma sala, y fue una experiencia realmente especial para mí conocer finalmente a tanta gente que ha sacado tanto provecho del uso del framework. Es fácil subestimar el impacto del trabajo que hacemos aquí cuando todo está solo en GitHub y Twitter, y verlo manifestado en el espacio físico con personas reales simplemente me dejó radiante de orgullo.
Es realmente un honor trabajar en estos proyectos y poder ayudar a tanta gente a divertirse más construyendo cosas para la web. Espero hacer otro evento como este en el futuro — sin duda un punto culminante importante en mi vida.
Echa un vistazo a la galería de fotos de Tailwind Connect 2023 para ver más fotos del evento, y mira la presentación principal en YouTube si no pudiste asistir en persona.