Construir un Sistema de Diseño con React y Tailwind CSS

Hola a todos, soy Shruti Balasah, una educadora tecnológica de India. Desafortunadamente no pude viajar para encontrarme con todos ustedes en persona, pero aún así estoy realmente agradecida de poder hablar con todos ustedes en este gran escenario virtual.

Hoy voy a hablar sobre los design systems y cómo puedes construir uno usando React y Tailwind CSS. ¿Cualquier charla que tenga la palabra sistema tiene que ser aburrida, verdad? Pero lo siento, no lo haré aburrido para ti. Aquí tienes una rápida visión general de lo que vamos a cubrir. ¿Por qué un design system? ¿Qué es un design system? ¿Qué es Tailwind CSS? ¿Cómo ayuda Tailwind con el design system, configuración avanzada de Tailwind, componentes React con Tailwind, y finalmente algunas bibliotecas de componentes para inspiration?

Ya sea que ya tengas un design system en marcha o que escuches este término por primera vez, puedo asegurarte que te llevarás algo valioso en los próximos 20 minutos. Siempre empiezo desde lo básico. Entonces, hagamos la primera pregunta, ¿por qué un design system? Has escuchado tantas charlas desde esta mañana y seguramente los design systems han aparecido mucho. Es hora de que implementes un buen design system.

Entonces, ¿qué es exactamente este design system? No es solo una guía de estilo o una biblioteca de componentes. Idealmente, un design system incluye al menos estas cuatro cosas, lenguaje de diseño, kit de diseño, biblioteca de componentes y documentación. El lenguaje de diseño es el conjunto más pequeño de detalles que componen la totalidad de tu front-end, como los colores de tu marca, el tipo de fuentes que usas, incluyendo tamaños de fuente, pesos de fuente, y luego el espaciado entre elementos, esquinas redondeadas, esquinas afiladas, y así sucesivamente. El kit de diseño es el conjunto de activos o archivos gráficos que te da el diseñador. Puede tener iconos, símbolos, plantillas, maquetas, y así sucesivamente. Bibliotecas de componentes, estoy seguro de que sabes lo que es esto. Es un conjunto de componentes reutilizables como encabezados, botones, elementos de formulario, tarjetas y cientos de pequeños bloques de construcción. Finalmente, la documentación reúne todas estas partes con referencias a cada una de ellas y enumera los quehaceres y los que no hacer. Durante los próximos 15 minutos o así, nos centraremos en estas dos partes del sistema de diseño, las más importantes para nosotros, como desarrolladores. Ahora entra Tailwind CSS. Por supuesto, has oído hablar de él, tal vez lo has usado también, y a algunos de ustedes les encanta, a algunos de ustedes incluso puede que lo odien. Pero para aquellos de ustedes que no saben lo que hace Tailwind CSS, aquí tienen una rápida introducción de dos minutos.

Tailwind CSS es un marco de CSS de bajo nivel que te proporciona los bloques de construcción para diseñar tus páginas web sin tener que salir de tu archivo HTML. Sin cambio de contexto. Tailwind tiene cientos de clases de utilidad como estas, TextWhite, TextCenter, donde TextWhite establecerá el color de tu texto en blanco y TextCenter lo centrará. Luego algo como esto, BG Blue 200 añadirá un fondo azul claro. Tailwind tiene alrededor de 220 tonos por defecto que puedes usar. Aquí tienes solo una muestra. Tailwind tiene 22 colores principales con 10 tonos cada uno, donde el sufijo 50 es el tono más claro y 900 es el más oscuro. A continuación, el H20 que ves aquí es una de las clases de utilidad de altura fija.

Hay alrededor de 40 clases como estas, H1, H2, y así sucesivamente. Estas son algunas muestras de la documentation y, por cierto, la documentation es increíble. Encontrarás cualquier cosa que estés buscando en cuestión de segundos. Luego, algo como esto, H20, W20, ya sabes, ambos alrededor de 80 píxeles, ancho y alto, luego rounded full, así que no hay necesidad de usar border, radius, 50%.. Simplemente puedes establecer rounded full. Esa es otra gran clase de utilidad. Y esto es una de las cosas más increíbles de Tailwind. ¡Mira eso! Por defecto es un cuadrado, pero después de MDBreakpoint, que es para pantallas más grandes que MDBreakpoint, que es el punto de interrupción medio, puedes añadir un radio de borde, rounded full. ¿Verdad? Así que puedes especificar cualquier clase de utilidad usando estos puntos de interrupción para cambiar estilos y sin usar ninguna consulta de medios como tal. Mucho menos code. Y aquí hay otra cosa, el modo oscuro. Puedes usar estas variantes oscuras por defecto, text gray 800 que es un color gris oscuro y en modo oscuro es text white. Vimos clases para el color del texto, el color de fondo, el radio del borde y las alturas. De la misma manera, Tailwind tiene clases de utilidad para casi todas las propiedades CSS con los valores más comúnmente utilizados. Usando estas clases de utilidad predeterminadas, puedes construir incluso los diseños más complejos como este y no tener que escribir una sola regla CSS. No tienes que inventar nombres de clases y no tienes que cambiar constantemente entre archivos HTML y CSS.

Bien, ahora lleguemos al meollo del asunto. Entonces, ¿cómo exactamente ayuda Tailwind CSS a construir un sistema de diseño? Para eso, permíteme cerrar mis diapositivas y veamos algo de code real. Este es un proyecto de React que he creado usando create-react-app. He instalado Tailwind CSS siguiendo la documentation. Es bastante sencillo. También he eliminado el contenido predeterminado de app.js y he añadido solo un encabezado aquí, párrafo y un enlace y solo algunas clases de utilidad aquí. Ahora esto es lo que tenemos en el navegador para empezar. Ahora aquí está nuestro archivo principal, el archivo de configuración de tailwind que se genera cuando instalas Tailwind siguiendo los pasos que acabo de mencionar. Esta es la configuración predeterminada para una aplicación React. Si quieres usar Tailwind tal como está con todos los estilos predeterminados de fábrica, no necesitas hacer ningún cambio en este archivo. Pero para construir un sistema de diseño, este es tu archivo más importante. Supón que te dan una guía de estilos, algo como esto por tu diseñador. Lo he tomado de Pinterest. Es solo un ejemplo realmente simple.

Supongamos que tenemos estos colores base, rojo, verde y azul oscuro y hay tonos más oscuros abajo. Además, tenemos negro y dos tonos de gris.

Ahora agreguemos estos a nuestro archivo de configuración. Dentro del bloque de tema, añade colores porque no queremos usar los colores predeterminados de Tailwind, queremos añadir los que nos dio nuestro diseñador. Puedes decir rojo o puedes decir primario, secundario, como quieras nombrarlos. Simplemente diré rojo y usaré ese valor, que es hash FF357B. Y de manera similar puedes añadir verde con el valor dado, que es hash 27EFDE.

Así que en el momento en que añades estos colores en lugar de, ya sabes, BG blue 100, puedes hacer algo como BG red y eso te da un color de fondo rojo. De manera similar puedes hacer BG green, también puedes hacer algo como text red, border red y así sucesivamente. Básicamente puedes usar estos colores donde quieras. Pero tenemos dos tonos de rojo, ¿verdad? Uno más oscuro y dos tonos de verde también.

Para incluir dos tonos, también puedes hacer algo como decir dark red, pero eso no es lo que queremos. Usemos la sintaxis de objeto para incluir eso aquí, como, ya sabes, digamos que el rojo predeterminado es este valor, y el rojo oscuro es, ya sabes, cualquiera que sea el valor oscuro allí. Permíteme pegarlo. Vale. Y luego puedes hacer lo mismo para el verde también. Ahora, intentemos incluir estos en nuestra, ya sabes, app.js, nombre de clase H1. Digamos text red. Observa que en el momento en que empiezo a escribir text hyphen R, ya puedes ver la autocompletación aquí. Y esto es gracias al plugin Tailwind CSS IntelliSense, que es realmente increíble. En el momento en que cambias tus valores de configuración, la autocompletación, ya sabes, automáticamente sucede. Así que ahora digamos text red, y veamos si funciona. Sí. Así que eso está funcionando. Ahora tienes, puedes seguir añadiendo ese azul oscuro, negro, y, ya sabes, verde y así sucesivamente. ¿Notaste que ahora solo tenemos este rojo y verde? No tenemos el azul 100, 200, y todos los otros 220 tonos en Tailwind. Pero supongamos que quieres algunos de esos colores de Tailwind. Puedes incluirlos. Necesitas importar primero los colores así require Tailwind CSS slash colors.

Y luego puedes usar, digamos que necesitas el color índigo, puedes decir colors dot Indigo y luego puedes usar o puedes decir bg Indigo 5100 y así sucesivamente. Pero como estamos creando un sistema de design, no querríamos hacer algo así. Queremos los colores que se nos dieron, pero seguramente necesitaremos blanco. Así que añadámoslo aquí.

OK, esto es sobre colores. El siguiente conjunto de propiedades más importante en el sistema de design son los estilos de fuente. Personalicemos primero la familia de fuentes, font family. Y la familia de fuentes predeterminada utilizada por Tailwind es sans, es decir, aplica font sans a todo el html. Así que cualquier cosa que cambies aquí se aplicará automáticamente. Digamos que quieres usar la fuente open sans y luego la de reserva así, puedes usar el array para mencionarlo. Así que ahora cuando digas font sans verás open sans. Digamos que quieres añadir otra fuente, puedes llamarla heading y cuando digas font querríamos tal vez play fair display y la de reserva siendo serif. Probemos esto, usemos esto en nuestro h1 diciendo font heading ya puedes ver eso aquí. Y sí, tenemos la fuente serif. Una vez más, la familia de fuentes predeterminada sans, lo que había en tailwind se ha ido. Esto está bien para la familia de fuentes.

Ahora, el tamaño del texto, digamos, sabes, hay tantos tamaños de texto que ofrece Tailwind como puedes ver text XS siendo extra pequeño, SM, base, LG, XL y así sucesivamente hasta text 9XL. Digamos que quieres mantener todos estos, pero también incluir otro, sabes, tamaño de texto algo como text XS. Ahora para hacer eso, si añadimos algo como font size, lo siento, font size aquí dentro del tema, los disponibles se sobrescriben. Como no queremos eso, lo quitamos del tema y en su lugar lo añadimos en el bloque extend. Así que lo que está disponible por defecto sigue estando y se extiende con estos valores adicionales. Así que digamos que quieres 0.6 rem. Bien. ¿Puedes observar exactamente lo que estamos haciendo aquí ahora? Estamos añadiendo todos los tokens de diseño de nuestro lenguaje de diseño al archivo de configuración único. Así que este archivo es esencialmente nuestro lenguaje de diseño del que hablamos inicialmente. ¿Por qué es esto importante? Por supuesto, podemos crear componentes y react, lo que haremos en un minuto. Pero los componentes no cubren el 100% del diseño. Podría cubrir incluso hasta el 70%, pero el resto seguirá teniendo elementos con estilos que tendrás que escribir y esos pueden fácilmente volverse inconsistentes con el resto de la página. Con Tailwind, puedes hacer cumplir los colores, tamaños de fuente, pesos de fuente, radio de borde, sombras de caja, relleno, margen, puntos de interrupción, y todo lo que puedas imaginar. Así que el desarrollador sólo usará las opciones disponibles en el archivo de configuración y tal vez añadirá nuevas aquí y luego las usará.

En mi opinión, este es el mayor beneficio de usar Tailwind CSS para tu sistema de diseño. Acabo de mostrarte cómo personalizar colores, familia de fuentes y tamaño de fuente. De manera similar, si deseas personalizar toda la configuración disponible en Tailwind, puedes consultar la configuración predeterminada.

Para obtener ese archivo, permíteme abrir una nueva pestaña de terminal y hagamos NPX Tailwind CSS init usando la opción completa. Ahora, permíteme darle un nombre diferente porque ya tenemos el Tailwind.config.js. Llamémoslo TailwindFull.config.js porque solo quiero usar esto como un archivo de referencia. Y aquí lo tenemos. Ahí. ¿Puedes ver, dentro del tema tenemos pantallas, que es esencialmente tus puntos de interrupción. Puedes copiar esto si deseas modificarlo, pegarlo aquí y luego, ya sabes, agregar un punto de interrupción X's aquí, como 480 píxeles. Normalmente hago eso. Recuerda que no puedes extender pantallas y agregar puntos de interrupción, simplemente se desordenará. Solo para pantallas, los puntos de interrupción, es mejor copiar todo y editar aquí. Tendrás que agregar todos los que necesites. También puedes agregar 3XL y así sucesivamente. Y luego tenemos colores, acabamos de ver dentro del tema, tenemos columnas, tenemos espaciado. Me gustaría mantener todo esto porque cada vez que haces H8 y P11, agrega un relleno de 2.75 rems, si haces W8 agregará 2 rems, por lo que podríamos necesitar la mayoría de esto y esto de todos modos no es una parte del sistema de diseño. Puedes agregar adicionalmente 100, 120, lo que necesites. Animación, puedes personalizar esto, relación de aspecto, imagen de fondo, opacidad, brillo y así sucesivamente. Idealmente retendría el 75% de las cosas pero solo cambiaría cosas como colores, todas las clases relacionadas con la tipografía sombras de caja, borde, radio, opacidad y cosas así.

Así que permíteme cerrar esto. Hagamos que nuestro encabezado realmente parezca un encabezado agregando texto Forexcel y fuente en negrita. Esto hace que parezca un encabezado. ¿Notas que cada vez que necesitamos un encabezado queremos que sea en negrita tal vez. Necesitaremos un tamaño particular para h1, tal vez texto 3XL para h2 y así sucesivamente. Definitivamente necesitaremos fuente de encabezado y también necesitaremos un color. Por lo general, esto es consistente en todo tu sitio web. Pero agregar todas estas cuatro clases de utilidad cada vez es demasiado. Por lo tanto, crear un componente de encabezado podría ser excesivo. En tales casos, tienes dos opciones.

Una opción es que puedes extraer todos estos y puedes ponerlos en tu archivo index.css dentro de layer base y decir H1 y lo siento usando la directiva apply, puedes aplicar todos estos y ahora esto funciona. Pero esto se convertirá en un segundo archivo. Y quiero que todo esté en mi archivo de configuración en sí. Así que déjame eliminar esto. No lo hagamos así.

En cambio, agreguemos los estilos base en el archivo de configuración en sí usando un plugin, para lo cual importemos el plugin const plugin. Y ahora dentro del array de plugins, llamemos a la función y pasemos una función anónima dentro de la cual toma un objeto y podemos descomponerlo en varios métodos de ayuda. El método de ayuda que necesitamos ahora es add base porque queremos agregar los estilos base. Y también necesitamos algo como algo llamado theme, que te diré qué es en un momento.

Dentro de esto llama a la función de ayuda add base y luego especifica los elementos que te gustaría estilizar. Para H1, agreguemos una familia de fuentes aquí. Necesitas usar la sintaxis CSS y JS. Y aquí querría este valor particular aquí, que se especifica en el tema. Así que cada vez que quieras acceder a un valor en theme, puedes usar esta función theme. Así que theme font family .sans. Así que eso me dará este valor aquí. También agreguemos un tamaño de fuente. Lo siento, tamaño de fuente, eso sería theme font. Size. Para Excel y también un peso de fuente theme. Font weight dot bold. Y ahora aquí, déjame agregar solo el color. Sí, también podemos agregar eso en el archivo de configuración. Pero solo te estoy mostrando que ambos pueden combinarse. Es decir, obtienes todos estos estilos más las clases de utilidad adicionales que agregas aquí. Y genial. Ahora, cualquier h1 que agreguemos en la página tendrá esos tres estilos base. Así que una vez más, tenemos todo en el archivo de configuración en sí. Así que genial. Esto es todo con respecto a la configuración para que nuestro lenguaje de diseño esté cuidado.

Lo último que vamos a hacer ahora es crear un componente reutilizable con Tailwind para que tengas una idea básica para crear tu propia component library, la segunda parte en el sistema de design del que dijimos que hablaríamos.

Así que primero para eso, déjame añadir algunos, lo siento, también cerraré esto. También cerraré esto. Déjame añadir algunos estilos a este botón lo siento, este enlace para hacerlo parecer un botón. Digamos que necesitamos algo de margen superior, necesitamos algo en línea, necesitamos que esto sea un bloque en línea y luego algún fondo BG rojo al pasar el ratón. Esto necesita ser BG rojo oscuro, incluso al enfocar, esto necesita ser BG rojo oscuro, luego el color del texto blanco y luego el relleno horizontal PX cuatro, el relleno vertical PY dos. Por supuesto, esto es mucho. No querrías añadir esto cada vez que creas un enlace, por eso vamos a crear un componente de enlace de botón.

Para ahorrar tiempo ya he creado esto aquí. Así que aquí está un componente de enlace de botón con href, nombre de clase e hijos. Podemos usar esto directamente aquí, reemplazar esto con enlace de botón y sí, también está importado. Lo siento. Sí. Vamos a comprobar. Por supuesto, tenemos lo mismo aquí. También añadamos algunas esquinas redondeadas, tal vez redondeadas MD. Genial.

Estamos usando este componente pero no queremos especificar nombres de clase como este aquí. Así que lo que haremos es, si puedes observar hay algunos estilos generales aquí que todos los botones podrían necesitar como bloque en línea y redondeado MD, pero hay algunas clases de utilidad específicas como BG rojo, sin embargo, los azulejos de enfoque, todos estos. Esto podríamos querer seguir cambiando. Podríamos necesitar un botón verde o botones azul oscuro como vimos en la guía de estilos, y luego estos rellenos podrían variar en función del tamaño del botón. Así que lo que haré ahora es crear un objeto de clases con algunos estilos base, luego algunos estilos relacionados con el color, y luego algunas clases relacionadas con el tamaño. Y aquí, tomaré bloque en línea de aquí y también redondeado MD y añadiré eso aquí. Bloque en línea, redondeado MD. Luego añadiré el BG rojo y todo esto en color. Y luego en tamaño, añadiré estos. MD2, me gustaría retenerlo aquí mismo. ¿De acuerdo? Ahora combinemos todos estos usando el paquete de nombres de clases NPM. Déjame importarlo primero. Importar nombres de clases de nombres de clases.

Y sí, aquí me gustaría usar nombres de clases. Esto también nos da lo mismo, pero nos gustaría personalizar el tamaño y el color como atributos. Así que lo que haremos es que los añadiremos como props aquí, pero antes de eso, vamos a crear opciones, sabes, rojo, y esto sería rojo. Y luego, de manera similar, vamos a tener un botón verde. Similar a eso, vamos también, ya sabes, cambiar el tamaño para dar algunas opciones como SM, que sería Px2, Py1, tal vez un relleno más pequeño, y luego tal vez MD, que sería Px4, Py2, luego Lg, Px6, y luego Py3. Vale, y aquí, digamos tamaño y luego color. Añadamos el predeterminado, lo siento. Sí, vamos a dar un tamaño predeterminado de MD y un predeterminado de digamos verde, sí. Y aquí, ahora esto sería color, y luego tamaño, porque cada uno es ahora un objeto. Vale, esto debería funcionar por defecto. Deberíamos tener un color verde y un botón de tamaño mediano, y perfecto, lo tenemos. Ahora podemos personalizar esto usando tamaño igual, digamos, lg, y luego color, lo siento, el color es rojo. Perfecto, tenemos un botón un poco grande con color rojo. Por supuesto, puedes extender esto aún más. Este fue el ejemplo más simple. Puedes usar tipos de prop. Puedes usar enums y hacer todo esto más robusto. Esto es realmente solo un ejemplo muy básico. Bien, eso es todo. Construir un sistema de diseño requiere mucha dedicación, pero si se hace bien, es más fácil de usar y mantener también porque un sistema de diseño sigue creciendo con nuevos componentes también. Encontré algunas bibliotecas de código abierto de React y Tailwind CSS que me gustaría compartir aquí. Material-Tailwind, Wcai UI, Windmill-React UI y Kimea UI. Estos son algunos buenos ejemplos. Cada uno de ellos se ha implementado de una manera ligeramente diferente. Puedes echar un vistazo y tomar algunas ideas de allí y construir tu propio sistema de diseño. Bueno, eso es todo. Gracias por escuchar. Realmente espero que hayas sacado algo útil de la masterclass. Estaré encantado de responder si tienes alguna pregunta en absoluto. No soy un experto en React, pero en Tailwind, sí, haré todo lo posible para responder. Me despido, adiós. ♪♪♪