Ha sido una semana ocupada terminando un montón de proyectos en los que hemos estado trabajando, pero finalmente todo está listo, así que parece un buen momento para otra actualización.
Clasificamos y resolvimos otros 226 issues y pull requests de GitHub desde mi última publicación, y finalmente estamos por debajo de 50 issues/PRs abiertos en toda nuestra organización por primera vez. Así que, por favor, dejen de encontrar errores, solo quiero diseñar y construir cosas hermosas con Tailwind CSS por un tiempo.
Hablando de cosas hermosas, ¡esto es lo que se lanzó en las últimas semanas!
Spotlight: Tu nuevo sitio web personal
Hace un par de días lanzamos Spotlight, una nueva e impresionante plantilla de sitio web personal que diseñamos para Tailwind UI.
Como nuestras otras plantillas, está construida con Next.js, y esta vez estamos usando MDX para impulsar todo el contenido basado en markdown, como la sección del blog.
Diseñar esta plantilla fue un desafío bastante divertido e interesante — queríamos crear algo que fuera realmente hermoso e inspirador, pero que también fuera lo suficientemente poco dogmático como para sentirse adecuado para casi cualquier persona. Optamos por un diseño bastante minimalista que obtiene su personalidad de pequeños detalles como imágenes rotadas, toques de color para los enlaces y una sutil profundidad de sombras y capas en lugares como la navegación superior.
Como siempre, recomiendo revisar la vista previa en vivo para la experiencia completa — presta especial atención a la forma en que funcionan el avatar y la navegación en la página de inicio mientras te desplazas, es muy beso de chef cuando juegas con el sitio real.
Intentamos estructurar el sitio de la manera en que estructuraríamos nuestros propios sitios personales, por lo que incluye un blog dedicado, una página para que listes algunos de tus proyectos favoritos en los que has trabajado, un área para que enlaces a cosas como charlas de conferencias que has dado, y una página "usos" para listar todas tus herramientas y equipos favoritos.
Si tienes una licencia de acceso total a Tailwind UI, ¡ya tienes acceso a esta plantilla! Y si no la tienes, considéralo — es la mejor manera de apoyar nuestro trabajo en proyectos de código abierto como Tailwind CSS, Headless UI y Heroicons.
Heroicons v2.0
El año pasado lanzamos Heroicons v1.0. Bueno, la semana pasada lanzamos Heroicons v2.0, que es un conjunto de iconos completamente nuevo, ilustrado desde cero en el que Steve ha estado trabajando durante aproximadamente un año.
Incluye 280 iconos dibujados en tres estilos distintos:
- Outline — iconos de línea con un trazo de 1.5px, dibujados en un view box de 24px.
- Solid — iconos sólidos con formas rellenas, dibujados en un view box de 24px.
- Mini — iconos sólidos con formas rellenas, dibujados en un view box de 20px.
Las mayores diferencias con la v1 son que el conjunto outline utiliza un trazo más fino, que se siente un poco más moderno y de moda en estos días, y visualmente los iconos son un poco más juguetones en estilo.
Aunque estos tengan "v2" en el nombre, es mejor pensar en Heroicons v2 más como Terminator 2 que como OpenSSL 2 — sentimos que representan nuestro mejor trabajo pero es un nuevo conjunto de iconos, no estrictamente una actualización del conjunto de iconos original. No te sientas presionado a actualizar proyectos existentes como lo harías con una dependencia de aplicación real, pero si quieres migrar, consulta las notas de la versión para todo lo que necesitas para cambiar.
Para explorar todos los nuevos iconos, visita el sitio web totalmente rediseñado de Heroicons que lanzamos con el nuevo conjunto.
Headless UI v1.7
A principios de esta semana etiquetamos una nueva versión de Headless UI, nuestras librerías React y Vue de componentes de UI sin estilo.
Headless UI v1.7 incluye la habitual serie de correcciones de errores y mejoras, ¡pero también algunas características nuevas realmente útiles!
Añadida la prop "by" para controlar las comparaciones de objetos
Hemos añadido una nueva prop by a los componentes Listbox, Combobox y RadioGroup que hacen que sea mucho menos engorroso vincular un objeto como valor del formulario.
import { Listbox } from "@headlessui/react";const departments = [ { id: 1, name: "Marketing", contact: "Durward Reynolds" }, { id: 2, name: "HR", contact: "Kenton Towne" }, { id: 3, name: "Sales", contact: "Therese Wunsch" }, { id: 4, name: "Finance", contact: "Benedict Kessler" }, { id: 5, name: "Customer service", contact: "Katelyn Rohan" },];function DepartmentPicker({ selectedDepartment, onChange }) { return ( <Listbox value={selectedDepartment} by="id" onChange={onChange}> <Listbox.Button>{selectedDepartment.name}</Listbox.Button> <Listbox.Options> {departments.map((department) => ( <Listbox.Option key={department.id} value={department}> {department.name} </Listbox.Option> ))} </Listbox.Options> </Listbox> );}Esto hace que sea mucho más fácil que el valor provenga de fuera del componente, y te ahorra tener que simplemente vincular el id o similar y hacer un montón de búsquedas tú mismo para encontrar el objeto completo cuando sea necesario.
Consulta la documentación actualizada "Vincular objetos como valores" para cada componente para obtener más detalles.
Usar controles de formulario como componentes no controlados
Los componentes Listbox, Combobox y RadioGroup ahora te permiten pasar opcionalmente un defaultValue en lugar de un value, lo que te permite usarlos como un componente no controlado.
import { Listbox } from "@headlessui/react";const people = [ { id: 1, name: "Durward Reynolds" }, { id: 2, name: "Kenton Towne" }, { id: 3, name: "Therese Wunsch" }, { id: 4, name: "Benedict Kessler" }, { id: 5, name: "Katelyn Rohan" },];function Example() { return ( <form action="/projects/1/assignee" method="post"> <Listbox name="assignee" defaultValue={people[0]}> <Listbox.Button>{({ value }) => value.name}</Listbox.Button> <Listbox.Options> {people.map((person) => ( <Listbox.Option key={person.id} value={person}> {person.name} </Listbox.Option> ))} </Listbox.Options> </Listbox> <button>Submit</button> </form> );}Esto puede simplificar tu código cuando usas formularios HTML tradicionales o APIs de formularios que recopilan su estado usando FormData en lugar de rastrearlo usando el estado de React.
Consulta la documentación "Usar como componente no controlado" para cada componente para ver más ejemplos.
Atributos de datos para estilo de estado solo con CSS
Históricamente, siempre has tenido que dar estilo a los diferentes estados de un componente Headless UI inspeccionando los argumentos pasados a través de una prop de renderizado y renderizando condicionalmente las clases o el contenido que tuviera sentido. Esto podría sentirse como mucho código repetitivo cuando solo intentabas ajustar un color de fondo o hacer algún otro cambio solo de CSS.
En Headless UI v1.7, hemos agregado un atributo data-headlessui-state al HTML renderizado que incluye información sobre el estado actual para que puedas apuntarlo solo con CSS.
También hemos lanzado un nuevo plugin @headlessui/tailwindcss que te da variantes para estos estados para que sean súper fáciles de estilizar solo con clases de Tailwind CSS:
<Listbox.Option key={person.id} value={person} className="ui-active:bg-blue-500 ui-active:text-white ui-not-active:bg-white ui-not-active:text-black"> <CheckIcon className="ui-selected:block hidden" /> {person.name}</Listbox.Option>Consulta la nueva documentación sobre estilo usando atributos de datos para obtener más detalles.
Soporte Insiders en Tailwind Play
No todo el mundo sabe esto, pero enviamos una compilación insiders de Tailwind CSS a npm que se construye y despliega automáticamente cada vez que un nuevo commit llega al repositorio. Esto hace que sea realmente fácil probar nuevas características y correcciones antes de que se etiqueten realmente en una versión adecuada.
Bueno, ahora también incluimos acceso a la compilación insiders en Tailwind Play, así que puedes jugar con cosas de última generación sin siquiera configurar un proyecto:
Solo mantenemos la última compilación insiders en Play, así que si creas una demo usando una compilación insiders, ten en cuenta que podría romperse si la próxima compilación insiders cambia algo en alguna característica no lanzada que estuvieras usando. De todos modos, no deberías poner cosas importantes ahí, vamos, sé profesional.
Tailwind CSS + Phoenix v1.7
Hace un tiempo empezamos a hablar con el equipo de Phoenix porque querían enviar Tailwind CSS por defecto en una versión futura. Pensé que esto era súper emocionante y quería trabajar con ellos para hacer que la experiencia lista para usar fuera realmente hermosa.
Diseñamos una nueva pantalla de bienvenida y todo el andamiaje necesario para su sistema generador, que se enviará como parte de Phoenix v1.7.
Chris McCord, el creador de Phoenix, dio una gran charla la semana pasada que recorre todas las cosas de Tailwind CSS que están enviando, vale la pena verla si tienes curiosidad por saber más.
¡Así que ahí lo tienes, eso es todo lo más genial en lo que hemos estado trabajando durante las últimas semanas!
Durante el próximo mes más o menos, estoy emocionado por construir un montón de nuevos componentes de Tailwind UI que hemos estado diseñando, explorar algunas ideas de nuevas características para Tailwind CSS, y empezar a hacer algo de I+D sobre cómo sería crear una especie de plantilla de kit de inicio de aplicación con Tailwind + Next.js — creo que podría ser bastante genial si podemos lograrlo.
¡Nos vemos en la próxima actualización!