Construyendo componentes de React reutilizables usando Tailwind

¡Registro!

Accesibilidad para diseñadores, con Stéphanie Walter

Índice

Método 1: controlar clases con el módulo Classnames
1. Uso de nombres de clases para componentes interactivos
Método 2: uso de constantes para definir un sistema de diseño
Método 3: componer utilidades con@apply
1. Desventajas de usar@apply
Resumen
1. Lectura recomendada en SmashingMag:

Tailwind es un popular marco CSS de utilidad que proporciona nombres de clases de bajo nivel a los desarrolladores web. No tiene JavaScript y funciona bien con marcos existentes como React, Vue, Angular, Ember y otros. Si bien esto es positivo, puede resultar confuso para los nuevos desarrolladores entender cómo integrar Tailwind en sus aplicaciones. En este artículo, exploraremos formas de crear componentes React reutilizables utilizando Tailwind.

En esta publicación, veremos varias formas diferentes en las que puede crear componentes React reutilizables que aprovechen Tailwind bajo el capó y al mismo tiempo expongan una interfaz agradable a otros componentes. Esto mejorará su código al pasar de largas listas de nombres de clases a accesorios semánticos que son más fáciles de leer y mantener.

Deberá haber trabajado con React para poder comprender bien esta publicación.

Tailwind es un marco CSS muy popular que proporciona clases de utilidad de bajo nivel para ayudar a los desarrolladores a crear diseños personalizados. Ha ganado popularidad en los últimos años porque resuelve muy bien dos problemas:

Tailwind facilita la realización de cambios iterativos en HTML sin tener que buscar en hojas de estilo para encontrar selectores de CSS coincidentes.
Tailwind tiene convenciones y valores predeterminados sensatos. Esto facilita que las personas comiencen sin escribir CSS desde cero.

Agregue la documentación completa y no sorprenderá por qué Tailwind es tan popular.

Estos métodos le ayudarán a transformar el código similar a este:

button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" Enable/button

Para codificar eso se ve así:

Button size="sm" textColor="white" bgColor="blue-500" Enable/Button

La diferencia entre ambos fragmentos es que en el primero utilizamos una etiqueta de botón HTML estándar, mientras que en el segundo utilizamos un Buttoncomponente. El Buttoncomponente se creó para ser reutilizable y es más fácil de leer ya que tiene una mejor semántica. En lugar de una larga lista de nombres de clases, utiliza propiedades para establecer varios atributos como size, textColory bgColor.

Empecemos.

Método 1: controlar clases con el módulo Classnames

Una forma sencilla de adaptar Tailwind a una aplicación React es aceptar los nombres de las clases y alternarlos mediante programación.

El módulo npm classnames facilita el cambio de clases en React. Para demostrar cómo puede usar esto, tomemos un caso de uso en el que tiene Buttoncomponentes en su aplicación React.

// This could be hard to read.button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"Enable/button// This is more conventional React.Button size="sm" textColor="white" bgColor="blue-500"Enable/Button

Veamos cómo separar las clases de Tailwind para que las personas que usan este Buttoncomponente puedan usar accesorios de React como size, textColory bgColor.

Pase accesorios como bgColory textColordirectamente a la plantilla de cadena de nombre de clase.
Utilice objetos para cambiar los nombres de las clases mediante programación (como lo hemos hecho con el sizeaccesorio)

En el código de ejemplo siguiente, veremos ambos enfoques.

// Button.jsximport classnames from 'classnames';function Button ({size, bgColor, textColor, children}) { return ( button className={classnames("bg-${bgColor} text-${textColor} font-bold py-2 px-4 rounded", { "text-xs": size === 'sm' "text-xl": size === 'lg', })} {children} /button )};export default Button;

En el código anterior, definimos un Buttoncomponente que requiere los siguientes accesorios:

size
Define el tamaño del botón y aplica las clases Tailwind text-xsotext-xl
bgColor
Define el color de fondo del botón y aplica las bg-*clases Tailwind .
textColor
Define el color del texto del botón y aplica Tailwind text-* classes.
children
Todos los subcomponentes pasarán por aquí. Generalmente contendrá el texto dentro del archivo Button.

Al definirlo Button.jsx, ahora podemos importarlo y usar accesorios de React en lugar de nombres de clases. Esto hace que nuestro código sea más fácil de leer y reutilizar.

import Button from './Button';Button size="sm" textColor="white" bgColor="blue-500"Enable/Button

Uso de nombres de clases para componentes interactivos

Un botón es un caso de uso muy simple. ¿Qué tal algo más complicado? Bueno, puedes llevar esto más allá y crear componentes interactivos.

Por ejemplo, veamos un menú desplegable creado con Tailwind.

Un menú desplegable interactivo creado con Tailwind y alternancia de nombres de clases.

Para este ejemplo, creamos el componente HTML usando los nombres de clase CSS de Tailwind pero exponemos un componente React que se ve así:

Dropdown options={["Edit", "Duplicate", "Archive", "Move", "Delete"]} onOptionSelect={(option) = { console.log("Selected Option", option)} } /

Al observar el código anterior, notará que no tenemos clases de Tailwind. Todos están ocultos dentro del código de implementación de Dropdown/. El usuario de este Dropdowncomponente solo tiene que proporcionar una lista optionsy un controlador de clic onOptionSelectcuando optionse hace clic en.

Veamos cómo se puede construir este componente usando Tailwind.

Eliminando parte del código no relacionado, aquí está el quid de la lógica. Puede ver este Codepen para ver un ejemplo completo.

import classNames from 'classnames';function Dropdown({ options, onOptionSelect }) { // Keep track of whether the dropdown is open or not. const [isActive, setActive] = useState(false); const buttonClasses = `inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-blue-500 active:text-gray-200 transition ease-in-out duration-150`; return ( // Toggle the dropdown if the button is clicked button onClick={() = setActive(!isActive)} className={buttonClasses} Options /button // Use the classnames module to toggle the Tailwind .block and .hidden classes div class={classNames("origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg", { block: isActive, hidden: !isActive })} // List items are rendered here. {options.map((option) = div key={option} onClick={(e) = onOptionSelect(option)}{option}/div)} /div )}export default Dropdown;

El menú desplegable se vuelve interactivo mostrándolo u ocultándolo selectivamente usando las clases .hiddeny .block. Cada vez que se buttonpresiona, activamos el onClickcontrolador que cambia el isActiveestado. Si el botón está activo ( isActive === true), configuramos la blockclase. De lo contrario, configuramos la hiddenclase. Ambas son clases de Tailwind para alternar el comportamiento de visualización . Actos de contricion y Números de los Angeles

En resumen, el módulo de nombres de clases es una forma sencilla y eficaz de controlar mediante programación los nombres de clases para Tailwind. Hace que sea más fácil separar la lógica en accesorios de React, lo que hace que sus componentes sean más fáciles de reutilizar. Funciona para componentes simples e interactivos.

Método 2: uso de constantes para definir un sistema de diseño

Otra forma de usar Tailwind y React juntos es usar constantes y asignar accesorios a una constante específica. Esto es eficaz para sistemas de diseño de edificios. Demostrémoslo con un ejemplo.

Comience con un theme.jsarchivo donde enumere su sistema de diseño.

// theme.js (you can call it whatever you want)export const ButtonType = { primary: "bg-blue-500 hover:bg-blue-700 text-white font-bold rounded", secondary: "bg-blue-500 hover:bg-blue-700 text-white font-bold rounded", basic: "bg-white hover:bg-gray-700 text-gray-700 font-bold rounded", delete: "bg-red-300 hover:bg-red-500 text-white font-bold rounded"};export const ButtonSize = { sm: "py-2 px-4 text-xs", lg: "py-3 px-6 text-lg"}

En este caso, tenemos dos conjuntos de constantes:

ButtonTypeDefine cómo se diseñan los botones en nuestra aplicación.
ButtonSizesdefine los tamaños de los botones en nuestra aplicación.

Ahora, escribamos nuestro Buttoncomponente:

import {ButtonType, ButtonSize} from './theme';function Button({size, type, children}) { // This can be improved. I’m keeping it simple here by joining two strings. const classNames = ButtonType[type] + " " + ButtonSize[size]; return ( button className={classNames}{children}/button )}export default Button;

Usamos las constantes ButtonTypey ButtonSizepara crear una lista de nombres de clases. Esto hace que la interfaz de nuestro sea Buttonmucho más agradable. Nos permite usar sizey typeaccesorios en lugar de poner todo en una cadena de nombre de clase.

// Cleaner and well defined props.Button size="xs" type="primary"Enable/Button

Frente al enfoque anterior:

// Exposing class namesbutton className="py-2 px-4 text-xs bg-blue-500 hover:bg-blue-700 text-white font-bold rounded"Enable/button

Si necesita redefinir el aspecto de los botones en su aplicación, simplemente edite el theme.jsarchivo y todos los botones de su aplicación se actualizarán automáticamente. Esto puede resultar más sencillo que buscar nombres de clases en varios componentes.

Método 3: componer utilidades con@apply

Una tercera forma de mejorar la legibilidad de tus componentes de React es usar CSS y el @applypatrón disponible en PostCSS para extraer clases repetidas. Este patrón implica el uso de hojas de estilo y postprocesadores.

Demostremos cómo funciona esto mediante un ejemplo. Supongamos que tiene un grupo de botones que tiene un botón principal y un botón secundario.

Un grupo de botones que consta de un botón principal y uno secundario. ( Vista previa grande )

button className="py-2 px-4 mr-4 text-xs bg-blue-500 hover:bg-blue-700 text-white font-bold rounded"Update Now/buttonbutton className="py-2 px-4 text-xs mr-4 hover:bg-gray-100 text-gray-700 border-gray-300 border font-bold rounded"Later/button

Usando el @applypatrón, puedes escribir este HTML como:

button className="push_button red btn-primary btn-xs"Update Now/buttonbutton className="push_button red btn-secondary btn-xs"Later/button

Que luego puede adoptarse en React para convertirse en:

import classnames from "classnames";function Button ({size, type, children}) { const bSize = "push_button red-" + size; const bType = "push_button red-" + type; return ( button className={classnames("push_button red", bSize, bType)}{children}/button )}Button.propTypes = { size: PropTypes.oneOf(['xs, xl']), type: PropTypes.oneOf(['primary', 'secondary'])};// Using the Button component.Button type="primary" size="xs"Update Now/ButtonButton type="secondary" size="xs"Later/Button

Así es como crearía estos nombres de clase de estilo BEM, como .btn, .btn-primaryy otros. Comience creando un button.cssarchivo:

/* button.css */ @tailwind base;@tailwind components;.btn { @apply py-2 px-4 mr-4 font-bold rounded;}.btn-primary { @apply bg-blue-500 hover:bg-blue-700 text-white;}.btn-secondary { @apply hover:bg-gray-700 text-gray-700 border-gray-300 border;}.btn-xs { @apply text-xs;}.btn-xl { @apply text-xl;}@tailwind utilities;

El código anterior no es CSS real , pero PostCSS lo compilará . Hay un repositorio de GitHub disponible aquí que muestra cómo configurar PostCSS y Tailwind para un proyecto de JavaScript.

También hay un vídeo breve que muestra cómo configurarlo aquí .

Desventajas de usar@apply

El concepto de extraer clases de utilidad Tailwind en clases CSS de nivel superior parece tener sentido, pero tiene algunas desventajas que debes tener en cuenta. Destaquémoslos con otro ejemplo.

Primero, al extraer estos nombres de clases, perdemos parte de la información. Por ejemplo, debemos tener en cuenta que .btn-primaryse debe agregar a un componente que ya se .btnle ha aplicado. Además, .btn-primaryno .btn-secondaryse pueden aplicar juntos. Esta información no es evidente con solo mirar las clases.

Si este componente fuera algo más complicado, también necesitaría comprender la relación padre-hijo entre las clases. En cierto modo, este es el problema para el que Tailwind fue diseñado y, al utilizar @apply, estamos recuperando los problemas, de una manera diferente.

Aquí hay un video en el que Adam Wathan , el creador de Tailwind, analiza los pros y los contras de usar @apply.

Resumen

En este artículo, analizamos tres formas en que puede integrar Tailwind en una aplicación React para crear componentes reutilizables. Estos métodos le ayudan a crear componentes de React que tengan una interfaz más limpia utilizando props.

Utilice el módulo de nombres de clases para alternar clases mediante programación.
Defina un archivo de constantes donde defina una lista de clases por estado de componente.
Úselo @applypara extraer clases CSS de nivel superior.

Si tienes alguna pregunta, envíame un mensaje en Twitter a @tilomitra .

Lectura recomendada en SmashingMag:

Configuración de Tailwind CSS en un proyecto de React
Creando tablas ordenables con React
Una guía para herramientas de desarrollo CSS nuevas y experimentales en Firefox
Cree sus propios paneles de contenido que se expanden y contraen

(ks, ra, il)Explora más en

CSS
Viento de cola
Reaccionar
javascript

Tal vez te puede interesar:

Construyendo componentes de React reutilizables usando Tailwind

Construyendo componentes de React reutilizables usando Tailwind

Método 1: controlar clases con el módulo ClassnamesMétodo 2: uso de constantes para definir un sistema de diseñoMétodo 3: componer utilidades con@applyRes

programar

es

https://aprendeprogramando.es/static/images/programar-construyendo-componentes-de-react-reutilizables-usando-tailwind-1029-0.jpg

2024-12-03

Construyendo componentes de React reutilizables usando Tailwind — Construyendo componentes de React reutilizables usando Tailwind

Update cookies preferences