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

27 min
21 Jun, 2022

Video Summary and Transcription

Esta Charla discute los sistemas de diseño y cómo construir uno utilizando React y Tailwind CSS. Tailwind CSS proporciona clases de utilidad para construir diseños complejos sin escribir reglas de CSS. Se pueden agregar colores personalizados al archivo de configuración de Tailwind CSS, y los estilos de fuente y los tamaños de texto se pueden personalizar. La configuración completa de Tailwind CSS se puede personalizar para cumplir con requisitos específicos. Se pueden agregar estilos base al archivo de configuración utilizando un complemento. Se pueden crear componentes reutilizables con Tailwind CSS, lo que permite 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 de 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 dar estilo a páginas web sin salir de tu archivo HTML. Tiene cientos de clases de utilidad y una amplia gama de colores y tonos.

Desafortunadamente no pude viajar para conocerlos en persona, pero estoy muy agradecida de poder hablar con todos ustedes en este gran escenario virtual.

Hoy hablaré sobre los sistemas de diseño 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 la haré aburrida para ustedes. Aquí hay una descripción general de lo que cubriremos. ¿Por qué un sistema de diseño? ¿Qué es un sistema de diseño? ¿Qué es Tailwind CSS? Cómo Tailwind ayuda con el sistema de diseño, configuración avanzada de Tailwind, componentes de React con Tailwind, y finalmente algunas bibliotecas de componentes para inspiración.

Ya sea que ya tengas un sistema de diseño implementado o estés escuchando este término por primera vez, puedo asegurarte que llevarás algo valioso en los próximos 20 minutos. Siempre comienzo desde lo básico. Entonces hagamos la primera pregunta, ¿por qué un sistema de diseño? Han escuchado tantas charlas desde la mañana y seguramente los sistemas de diseño han aparecido mucho. Ya es hora de implementar un buen sistema de diseño.

Entonces, ¿qué es exactamente este sistema de diseño? No es solo una guía de estilo o una biblioteca de componentes. Idealmente, un sistema de diseño 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 conforman todo 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 proporciona el diseñador. Puede incluir iconos, símbolos, plantillas, maquetas, y más. Las bibliotecas de construcción, estoy seguro de que sabes qué 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 dos y no hacer. Durante los próximos 15 minutos, nos enfocaremos 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 incluso lo hayas usado, y a algunos les encanta, a otros puede que incluso lo odien. Pero para aquellos de ustedes que no saben qué hace Tailwind CSS, aquí hay una breve introducción de dos minutos.

Tailwind CSS es un marco de CSS de bajo nivel que te brinda los bloques de construcción para dar estilo a tus páginas web sin tener que salir de tu archivo HTML. Sin cambiar 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 agregará un fondo azul claro. Tailwind tiene alrededor de 220 tonos por defecto que puedes usar. Aquí hay 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. Luego, 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 al proporcionar una configuración predeterminada para una aplicación React y permitirte personalizarla según una guía de estilo dada.

Hay alrededor de 40 clases como H1, H2, y así sucesivamente. Estos son algunos ejemplos de la documentación y, por cierto, la documentación es increíble. Encontrarás cualquier cosa que estés buscando en cuestión de segundos. Luego, algo como esto, H20, W20, ambos alrededor de 80 píxeles de ancho y alto, luego rounded-full, por lo que no es necesario 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 sorprendentes de Tailwind. ¡Mira eso! De forma predeterminada, 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 agregar un border-radius: rounded-full. ¿Correcto? Por lo tanto, puedes especificar cualquier clase de utilidad utilizando estos puntos de interrupción para cambiar estilos y sin utilizar media queries. Mucho menos código. Y aquí hay otra cosa, el modo oscuro. Puedes usar estas variantes oscuras de forma predeterminada, text-gray-800 que es un color gris oscuro y en modo oscuro es text-white. Vimos clases para color de texto, color de fondo, border-radius y alturas. De la misma manera, Tailwind tiene clases de utilidad para casi todas las propiedades CSS con 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 clase y no tienes que cambiar constantemente entre archivos HTML y CSS.

Bien, ahora vamos al meollo del asunto. Entonces, ¿cómo exactamente ayuda Tailwind CSS a construir un sistema de diseño? Para eso, permítanme cerrar mis diapositivas y veamos algo de código real. Este es un proyecto React que he creado usando create-react-app. He instalado Tailwind CSS siguiendo la documentación. Es bastante sencillo. También he eliminado el contenido predeterminado de app.js y solo he agregado un encabezado aquí, un párrafo y un enlace, y solo algunas clases de utilidad aquí. Ahora esto es lo que tenemos en el navegador para comenzar. 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, no necesitas hacer ningún cambio en este archivo. Pero para construir un sistema de diseño, este es tu archivo más importante. Supongamos que te dan una guía de estilo, algo como esto por parte de tu diseñador. Lo he tomado de Pinterest. Es solo un ejemplo muy simple.

3. Agregando Colores Personalizados a Tailwind CSS

Short description:

Vamos a agregar colores personalizados a nuestro archivo de configuración de Tailwind CSS. Al especificar los colores proporcionados 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 más oscuro de rojo. Lo mismo se puede hacer para el verde. Importando 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 a continuación. También tenemos negro y dos tonos de gris.

Ahora agreguemos estos colores a nuestro archivo de configuración. Dentro del bloque de tema, agreguemos colores porque no queremos usar los colores predeterminados de Tailwind, queremos agregar 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 agregar verde con el valor dado, que es hash 27EFDE.

Entonces, en el momento en que agregues 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 también dos tonos de verde.

Para incluir dos tonos, también puedes hacer algo como decir rojo oscuro, pero eso no es lo que queremos. Usemos la sintaxis de objeto para incluirlo aquí mismo, 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í. Déjame pegarlo. Bien. Y luego puedes hacer lo mismo para el verde también. Ahora, intentemos incluir estos en nuestro archivo app.js, en el nombre de clase H1. Digamos text red. En el momento en que comienzo a escribir text guion R, ya puedes ver la autocompletación aquí. Y esto es gracias al complemento Tailwind CSS IntelliSense, que es realmente increíble. En el momento en que cambias los valores de configuración, la autocompletación se actualiza automáticamente. Ahora digamos text red, y veamos si funciona. Sí, eso funciona. Ahora puedes seguir agregando esos colores azul oscuro, negro, verde, y así sucesivamente. ¿Notaste que ahora solo tenemos estos colores rojo y verde? No tenemos el azul 100, 200 y todos los demás tonos 220 en Tailwind. Pero digamos que quieres algunos de esos colores de Tailwind. Puedes incluirlos. Primero debes importar los colores de esta manera: require Tailwind CSS/colors.

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

Short description:

Y luego puedes usar los colores que se nos dan, 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 en los estilos de toda la página. Tailwind nos permite aplicar diversas propiedades de diseño, lo que facilita a los desarrolladores crear diseños consistentes.

Y luego puedes usar, digamos, que necesitas el color Índigo, puedes decir colors.dot.Índigo y luego puedes usar, o puedes decir bg.Índigo.5100 y así sucesivamente. Pero dado que estamos creando un sistema de diseño, no querríamos hacer algo así. Queremos usar los colores que se nos dan, pero seguramente necesitaremos blanco. Así que agreguémoslo aquí.

OK, esto se trata de los colores. El siguiente conjunto de propiedades más importante en el sistema de diseño es los estilos de fuente. Personalicemos primero la familia de fuentes, la familia de fuentes. La familia de fuentes predeterminada utilizada por Tailwind es sans, es decir, aplica la fuente sans a todo el HTML. Entonces, cualquier cambio que hagas aquí se aplicará automáticamente. Digamos que quieres usar la fuente open sans y luego el fallback como este, puedes usar el array para mencionarlo. Ahora, cuando digas font.sans, verás open sans. Digamos que quieres agregar otra fuente, puedes llamarla heading y cuando digas font, queremos usar tal vez play fair display y el fallback sería serif. Probemos esto, usemos esto en nuestro h1 diciendo font.heading y ya puedes verlo aquí. Y sí, tenemos la fuente serif. Una vez más, la familia de fuentes predeterminada sans, lo que sea que había en Tailwind, se ha ido. Esto está bien para la familia de fuentes.

Ahora, el tamaño de texto. Digamos, ya sabes, hay tantos tamaños de texto que ofrece Tailwind, como puedes ver, el texto XS es extra pequeño, SM, base, LG, XL y así sucesivamente hasta el texto 9XL. Digamos que quieres mantener todos estos, pero también incluir otro tamaño de texto, algo como texto XS. Ahora, para hacer eso, si agregamos algo como font.size, lo siento, font.size aquí dentro del tema, los disponibles se anulan. Como no queremos eso, elimínalo del tema y en su lugar agrégalo en el bloque extend. Entonces, lo que esté disponible de forma predeterminada seguirá existiendo y se extenderá con estos valores adicionales. Digamos que quieres 0.6 rem. Muy bien. ¿Puedes observar qué es exactamente lo que estamos haciendo aquí ahora mismo? Estamos agregando todos los tokens de diseño de nuestro lenguaje de diseño en un solo archivo de configuración. Este archivo es esencialmente nuestro lenguaje de diseño del que hablamos inicialmente. ¿Por qué es esto importante? Por supuesto, podemos crear componentes en React, lo cual haremos en un minuto. Pero los componentes no cubren el 100% del diseño. Pueden cubrir hasta un 70%, pero el resto aún tendrá elementos con estilos que tendrás que escribir y que pueden volverse fácilmente inconsistentes con el resto de la página. Con Tailwind, puedes aplicar los colores, tamaños de fuente, pesos de fuente, radios de borde, sombras de caja, padding, margen, puntos de quiebre y todo lo que puedas imaginar. Entonces, el desarrollador solo usará las opciones disponibles en el archivo de configuración y tal vez agregue nuevas aquí mismo 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 del terminal y ejecutar NPX Tailwind CSS init usando la opción completa. Ahora, démosle un nombre diferente porque ya tenemos el Tailwind.config.js. Llamémoslo TailwindFull.config.js porque solo quiero usarlo como archivo de referencia. Y aquí lo tenemos. Ahí está. ¿Puedes verlo? Dentro de theme tenemos screens, que son básicamente tus puntos de quiebre. Puedes copiar esto si deseas modificarlo, pégalo aquí y luego agrega un punto de quiebre aquí, como 480 píxeles. Por lo general, hago eso. Recuerda que no puedes extender screens y agregar puntos de quiebre, solo causará problemas. Solo para screens, los puntos de quiebre, es mejor copiar todo y editar aquí. Deberás agregar todos los que necesites. También puedes agregar 3XL y así sucesivamente. Luego tenemos colores, acabamos de verlos dentro de theme, tenemos columnas, tenemos espaciado. Me gustaría mantener todo esto porque cuando usas H8 y P11, agrega un padding de 2.75 rem, si usas W8, agregará 2 rem, por lo que es posible que necesitemos la mayoría de esto y de todos modos esto no es parte del sistema de diseño. Además, puedes agregar 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, bordes, radios, opacidad y cosas así.

Así que cierro esto. Hagamos que nuestro encabezado realmente parezca un encabezado agregando texto Forexcel y fuente 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 específico para h1, tal vez texto 3XL para h2 y así sucesivamente. Definitivamente necesitaremos font.heading y también necesitaremos un color. Por lo general, esto es consistente en todo tu sitio web. Pero agregar estas cuatro clases de utilidad cada vez es demasiado. Crear un componente de encabezado podría ser excesivo. En tales casos, tienes dos opciones.

6. Agregando Estilos Base al Archivo de Configuración

Short description:

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

Una forma es extraer todo esto y ponerlo en tu archivo index.css dentro de la capa base y decir H1 y lo siento, usando la directiva apply, puedes aplicar todo esto y ahora esto funciona. Pero esto se convertirá en un segundo archivo. Y quiero que todo esté en mi archivo de configuración mismo. Así que permíteme eliminar esto. No lo hagamos así.

En su lugar, agreguemos los estilos base en el archivo de configuración mismo usando un complemento, para lo cual importemos el complemento const plugin. Y ahora dentro del arreglo de complementos, llamemos a la función y pasemos una función anónima con la cual toma un objeto y podemos deconstruirlo en múltiples métodos auxiliares. El método auxiliar que necesitamos en este momento es add base porque queremos agregar los estilos base. También necesitamos algo llamado theme, lo cual te explicaré en un momento.

Dentro de esta llamada, usa la función auxiliar 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 en JS. Y aquí quiero este valor en particular, que está especificado en el theme. Así que cada vez que quieras acceder a un valor en el theme, puedes usar esta función theme. theme font family .sans. Eso me dará este valor aquí. Agreguemos también un tamaño de fuente. Lo siento, tamaño de fuente, que sería theme font size. Para Excel y también un peso de fuente theme font weight bold. Y ahora aquí, permíteme agregar solo el color. Sí, también podemos agregar eso en el archivo de configuración. Pero solo te estoy mostrando que ambos se pueden combinar. 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. Una vez más, tenemos todo en el archivo de configuración mismo. Asombroso. Esto es todo con respecto a la configuración para que nuestro lenguaje de diseño esté cubierto.

7. Creando un Componente Reutilizable con Tailwind

Short description:

Crearemos un componente reutilizable con Tailwind para demostrar cómo construir una biblioteca de componentes. Agregaremos estilos a un enlace para que parezca 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 agregaremos esquinas redondeadas y crearemos un objeto de clases para manejar diferentes estilos, colores y tamaños. Finalmente, combinaremos todos estos estilos usando el paquete de nombres de clase.

Lo último que vamos a hacer ahora es crear un componente reutilizable con Tailwind para que tengas una idea básica de cómo crear tu propia biblioteca de componentes, la segunda parte en el sistema de diseño del que dijimos que hablaríamos.

Entonces, primero para eso, permíteme agregar algunos, lo siento, también cerraré esto. También cerraré esto. Permíteme agregar algunos estilos a este botón, lo siento, este enlace para que parezca un botón. Digamos que necesitamos algo de margen superior, necesitamos algo en línea, necesitamos que esto sea en línea bloque y luego algo de fondo BG red en hover. Esto debe ser BG red dark, incluso en focus, esto debe ser BG red dark, luego el color del texto blanco y luego el relleno horizontal PX four, el relleno vertical PY two. Por supuesto, esto es mucho. No querrías agregar 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í. Entonces aquí tienes un componente de enlace de botón con href, nombre de clase e hijos. Podemos usarlo directamente aquí, reemplazar esto con button link y sí, también está importado. Lo siento. Sí. Vamos a comprobar. Por supuesto, tenemos lo mismo aquí. También agreguemos algunas esquinas redondeadas, tal vez rounded MD. Genial.

Estamos usando este componente pero no queremos especificar nombres de clase como este aquí. Entonces lo que haremos es, si puedes observar, hay algunos estilos generales aquí que todos los botones podrían necesitar, como en línea bloque y rounded MD, pero hay algunas clases de utilidad específicas como BG red, sin embargo, focus tiles, todas estas. Esto es lo que podríamos querer cambiar. Podríamos necesitar un botón verde o botones azul oscuro como vimos en la guía de estilos, y luego este relleno podría variar según el tamaño del botón. Entonces 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é en línea bloque de aquí y también rounded MD y lo agregaré aquí. En línea bloque, rounded MD. Luego agregaré el BG red y todo esto en color. Y luego en tamaño, agregaré estos. MD2, me gustaría mantenerlo aquí mismo. ¿De acuerdo? Ahora combinemos todo esto usando el paquete de nombres de clase. Permíteme importarlo primero. Importar class names de class names.

8. Personalizando el Tamaño y el Color de los Botones

Short description:

Para personalizar el tamaño y el color de los botones, podemos agregarlos 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 ampliar utilizando prop types y enums para una personalización más sólida.

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. Entonces lo que haremos es agregarlos como props aquí, pero antes de eso, creemos opciones, ya sabes, rojo, y esto sería rojo. Y luego de manera similar, tengamos un botón verde. Similar a eso, también, ya sabes, cambiemos el tamaño para dar algunas opciones como SM, eso sería Px2, Py1, tal vez un relleno más pequeño, y luego tal vez MD, eso sería Px4, Py2, luego Lg, Px6, y luego Py3. De acuerdo, y aquí, digamos tamaño y luego color. Agreguemos el valor predeterminado, lo siento. Sí, demos un valor predeterminado de tamaño MD y un valor predeterminado de color verde, sí. Y aquí, ahora esto sería color, y luego tamaño, porque cada uno es ahora un objeto. De acuerdo, esto debería funcionar de forma predeterminada. Deberíamos tener un botón de color verde y 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 ligeramente más grande con color rojo. Por supuesto, puedes ampliar esto aún más. Este fue el ejemplo más simple. Puedes usar prop types. Puedes usar enums y hacer todo esto más sólido. Esto es realmente solo un ejemplo muy básico. De acuerdo, 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 también de mantener 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 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. Espero que hayas obtenido algo útil de la sesión. Estaré encantado de responder si tienes alguna pregunta. No soy un experto en React, pero en Tailwind, sí, haré todo lo posible para responder. Despidiéndome, 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

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

React Advanced Conference 2022React Advanced Conference 2022
118 min
Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems
Workshop
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