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

Rate this content
Bookmark

Tailwind CSS, con su enfoque de utilidad primero, es conocido por acelerar el proceso de desarrollo. Combinándolo con el poder de React, veamos cómo puedes construir un sistema de diseño personalizado para tu proyecto para acelerarlo aún más, hacerlo escalable y también fácil de mantener.

Shruti Balasa
Shruti Balasa
27 min
21 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute los sistemas de diseño y cómo construir uno usando React y Tailwind CSS. Tailwind CSS proporciona clases de utilidad para construir diseños complejos sin escribir reglas CSS. Los colores personalizados pueden ser añadidos al archivo de configuración de Tailwind CSS, y los estilos de fuente y tamaños de texto pueden ser personalizados. Toda la configuración de Tailwind CSS puede ser personalizada para cumplir con requisitos específicos. Los estilos base pueden ser añadidos al archivo de configuración en sí mismo usando un plugin. Los componentes reutilizables pueden ser creados con Tailwind CSS, permitiendo una fácil personalización de tamaño y color.

Available in English

1. Introducción a los sistemas de diseño y Tailwind CSS

Short description:

Hola a todos, soy Shruti Balasah, una educadora tecnológica de India. Hoy hablaré sobre los sistemas de diseño y cómo construir uno usando React y Tailwind CSS. Cubriremos la importancia de los sistemas de diseño, qué son, Tailwind CSS, configuración avanzada de Tailwind, componentes React con Tailwind y bibliotecas de componentes para inspiración. Un sistema de diseño incluye lenguaje de diseño, kit de diseño, biblioteca de componentes y documentación. Tailwind CSS es un marco de CSS de bajo nivel que te permite diseñar páginas web sin salir de tu archivo HTML. Tiene cientos de clases de utilidad y una amplia gama de colores y tonos.

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.

2. Usando Tailwind CSS para construir un sistema de diseño

Short description:

Tailwind CSS tiene clases de utilidad para casi todas las propiedades CSS con valores comúnmente utilizados. Usando estas clases de utilidad predeterminadas, puedes construir incluso los diseños más complejos sin escribir una sola regla CSS. Tailwind CSS ayuda a construir un sistema de diseño proporcionando una configuración predeterminada para una aplicación React y permitiéndote personalizarla en función de una guía de estilos dada.

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.

3. Añadiendo Colores Personalizados a Tailwind CSS

Short description:

Agreguemos colores personalizados a nuestro archivo de configuración de Tailwind CSS. Al especificar los colores dados por nuestro diseñador, como rojo y verde, podemos usarlos en toda nuestra aplicación. Incluso podemos incluir tonos más oscuros utilizando la sintaxis de objeto. Por ejemplo, podemos definir un color rojo predeterminado y un tono de rojo más oscuro. Lo mismo se puede hacer para el verde. Al importar el módulo de colores de Tailwind, también podemos incluir los colores predeterminados de Tailwind si es necesario.

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.

4. Añadiendo Colores, Estilos de Fuente y Tamaños de Texto

Short description:

Y luego puedes usar los colores que se nos dieron, pero seguramente necesitaremos blanco. A continuación, personalicemos la familia de fuentes. La familia de fuentes predeterminada utilizada por Tailwind es sans, pero podemos cambiarla a open sans o agregar otra fuente como play fair display. También podemos personalizar los tamaños de texto ofrecidos por Tailwind y agregar otros adicionales. Al agregar todos los tokens de diseño al archivo de configuración, creamos un lenguaje de diseño que garantiza la consistencia de los estilos en toda la página. Tailwind nos permite hacer cumplir varias propiedades de diseño, lo que facilita a los desarrolladores la creación de diseños consistentes.

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á.

5. Personalizando la Configuración de Tailwind CSS

Short description:

En mi opinión, el mayor beneficio de usar Tailwind CSS para tu sistema de diseño es la capacidad de personalizar toda la configuración. Para hacer esto, consulta el archivo de configuración predeterminado y modifícalo según tus necesidades. El archivo de configuración incluye opciones para pantallas, colores, columnas, espaciado, animación, relación de aspecto, imagen de fondo, opacidad, brillo y más. Al personalizar estas opciones, puedes crear un sistema de diseño que cumpla con tus requisitos específicos. Alternativamente, puedes crear clases de utilidad reutilizables para estilos comúnmente utilizados, como encabezados, para evitar agregar múltiples clases cada vez que necesites un estilo específico.

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.

6. Añadiendo Estilos Base al Archivo de Configuración

Short description:

Una forma de agregar los estilos base es extraerlos en un archivo index.css separado, pero esto crea un archivo adicional. En cambio, podemos agregar los estilos base en el archivo de configuración en sí usando un plugin. Al llamar a la función de ayuda add base y especificar los elementos a estilizar, podemos personalizar la familia de fuentes, el tamaño de la fuente, el peso de la fuente y el color. Combinar estos estilos con las clases de utilidad en el archivo de configuración nos permite tener todo en un solo lugar, asegurando que nuestro lenguaje de diseño sea consistente.

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.

7. Creando un Componente Reutilizable con Tailwind

Short description:

Crearemos un componente reutilizable con Tailwind para demostrar cómo construir una biblioteca de componentes. Añadiremos estilos a un enlace para hacerlo parecer un botón, y luego crearemos un componente de enlace de botón con estilos predefinidos. Este componente se puede reutilizar fácilmente sin especificar nombres de clase. También añadiremos esquinas redondeadas y crearemos un objeto de clases para manejar diferentes estilos, colores y tamaños. Finalmente, combinaremos todos estos estilos utilizando el paquete NPM de nombres de clases.

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.

8. Personalizando el Tamaño y Color del Botón

Short description:

Para personalizar el tamaño y color de los botones, podemos añadirlos como props. Al crear opciones para diferentes colores y tamaños, podemos personalizar fácilmente los botones. El tamaño predeterminado es mediano con un color verde, pero podemos anular estos valores predeterminados especificando diferentes tamaños y colores como props. Este ejemplo básico se puede extender utilizando tipos de prop y enums para una personalización más robusta.

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. ♪♪♪

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Design Systems: Walking the Line Between Flexibility and Consistency
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
Rethinking CSS - Introducing Stylex
React Finland 2021React Finland 2021
25 min
Rethinking CSS - Introducing Stylex
Top Content
CSS + superpowers - bloat. How Stylex creates a zero-cost abstraction that gives CSS superpowers.
Walking the Line Between Flexibility and Consistency in Component Libraries
React Summit 2022React Summit 2022
27 min
Walking the Line Between Flexibility and Consistency in Component Libraries
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
Find Out If Your Design System Is Better Than Nothing
React Summit 2022React Summit 2022
20 min
Find Out If Your Design System Is Better Than Nothing
Building a design system is not enough. Your dev team has to prefer it over one-off components and third-party libraries. Otherwise, the whole effort is a waste of time. Learn how to use static code analysis to measure if your design system wins over the internal competition and data-driven ways to improve your position.
How to achieve layout composition in React
React Summit 2022React Summit 2022
8 min
How to achieve layout composition in React
Using CSS in this age of components is difficult. Many tools have been created to help us with this problem, but they all fall short in the one problem that tooling can never solve: Which component should be in charge of which styles? In this talk, we will go over strategies on how to build layouts in a composable way.
Type-safe Styling for React Component Packages: Vanilla Extract CSS
React Advanced Conference 2023React Advanced Conference 2023
19 min
Type-safe Styling for React Component Packages: Vanilla Extract CSS
Unlock the power of type-safe styling in React component packages with Vanilla Extract CSS. Learn how to effortlessly write scalable and maintainable styles, leveraging CSS-in-Typescript. Discover the seamless integration of Vanilla Extract CSS and take your React components to the next level.

Workshops on related topic

Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems
React Advanced Conference 2022React Advanced Conference 2022
118 min
Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems
Workshop
Richard Moss
Richard Moss
In this workshop, we'll take a tour through the most effective approaches to building out scalable UI components that enhance developer productivity and happiness :-) This will involve a mix of hands-on exercises and presentations, covering the more advanced aspects of the popular styled-components library, including theming and implementing styled-system utilities via style props for rapid UI development, and culminating in how you can build up your own scalable custom component library.
We will focus on both the ideal scenario---where you work on a greenfield project---along with tactics to incrementally adopt a design system and modern approaches to styling in an existing legacy codebase with some tech debt (often the case!). By the end of the workshop, you should feel that you have an understanding of the tradeoffs between different approaches and feel confident to start implementing the options available to move towards using a design system based component library in the codebase you work on.
Prerequisites: - Familiarity with and experience working on large react codebases- A good understanding of common approaches to styling in React