Componentes de IU con React + Tailwind

Componentes para interfaz de usuario de React usando Tailwind + PostCss


El desarrollo web front end moderno hasta ahora ha tratado de ayudarnos a desarrollar nuestras aplicaciones en módulos que trabajan en conjunto, todo el esfuerzo por separar la lógica de cada elemento de la aplicación ha dado frutos importantes y hoy tenemos frameworks completos que nos ayudan a desarrollar de esta manera y manejan a la perfección lógica y vistas para nuestras apps.

React es uno de los frameworks Front end del momento y su función básica según Facebook es:

A JavaScript library for building user interfaces.

React es una librería de JavaScript para construir interfaces de usuario.
Esto es muy cierto, React nació para crear interfaces de usuario, resuelve perfecto la lógica y la vista pero… hay varias maneras de resolver los estilos, una manera interesante es haciendo uso de un framework; El problema de estos frameworks es que tienen en su mayoría estilos predefinidos (UI Kit)y hacen que muchos sitios se vean idénticos.

La solución a esto es un Framework llamado Tailwind, Tailwind es un Framework de css orientado a la utilidad para construir interfaces de usuario personalizadas. Lo que quieren dar a entender sus creadores es que es un framework que consiste en clases de utilidad que nos permiten dar estilos a nuestra aplicación escribiéndolos directamente en el html(o jsx) y no es un UI Kit.

Tailwind es en teoría un framework declarativo de estilos, si necesitas un texto color azul simplemente colocas la clase de ayuda text-blue en el elemento. Esto hace el framework con todas las propiedades de los elementos, incluyendo clases para diseño responsive, hovers, elementos activos, entre otras. Teniendo esto en cuenta podemos inferir que tailwind tiene la facultad de complementar el diseño de nuestros componentes de IU con React, el cual también es un framework declarativo.

Iniciando un proyecto create-react-app + Tailwind

Iniamos un proyecto con create react app:

npm i -g create react app (solo si no tienes instalado create-react-app global)

create-react-app tailreact
cd tailreact

Con esto ejecutado tendremos listo un proyecto entero con react, es hora de instalar lo necesario para lograr hacer uso de Tailwind e integrarlo a CRA.

npm i — save-dev tailwindcss autoprefixer postcss-cli

Ahora creamos la configuración inicial de tailwind con el siguiente comando:

node_modules/.bin/tailwind init tailwind.config.js

Como pudiste notar, instalamos un par de dependencias extras con tailwind, una de ellas es postCSS y nos ayudará a llevar la configuración de tailwind a css común y corriente. Así que creamos el archivo postcss.config.js en la raíz del proyecto y pegamos la siguiente configuración:

const tailwindcss = require('tailwindcss');

Ya estamos casi listos, ahora hay que crear un archivo de entrada de css, para ello creamos el archivo src/styles/index.css
Dentro de este archivo necesitamos la configuración básica de tailwind dentro de el, la cual es:

@tailwind preflight;
@tailwind utilities;

Para que todo esto funcione en conjunto y podamos empezar a codear y dar estilo, necesitamos configurar las ejecuciones en nuestro package.json

"scripts": {
"b:css": "postcss src/styles/index.css -o src/index.css",
"w:css": "postcss src/styles/index.css -o src/index.css -w",
"start": "npm run w:css & react-scripts start",
"build": "npm run b:ss && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}

Eso son todos los pasos necesarios para la configuración, ahora estamos listos para ejecutar y comenzar a crear nuestros componentes estilizados con:

npm start

Usando Tailwind

Espero hayas leido con atención el código, te darás cuenta que las clases son muy descriptivas:

  • flex = le da la propiedad display flex.
  • justify-center = justifica en el centro el texto.
  • font-sans = le da propiedad sans-serif al texto.
  • border-black = le da un borde negro
  • hover:text-white =
  • entre otras…

Algunas de ellas tienen medidas o colores, estos valores están declarados en el archivo tailwind.config.js y puedes personalizarlos totalmente, pero por defecto tienen las medidas:

‘auto’: ‘auto’,
  • bg-teal-light = le da propiedad background-color con un color predefinido.
  • border-4 = le dan un borde de 1rem.
  • rounded-lg = le da un borde redondeado.
  • m-3 = le da un margin de 0.75.
  • p-3 = le da un margin de 0.75.

Componentes de IU Re-utilizables Usando metodología BEM(Bloque, elemento, modificador).

Creamos un componente components/Tailcard.js y creamos una card con el siguiente código:

Tailwind hasta este punto parece muy útil y práctico pero, ¿Que pasa si necesito 7, 10 0 15 clases en un elemento?; Obtenemos un formato complejo y difícilmente legible para esto, para eso utilizamos la regla de @apply y agrupamos los estilos en una propiedad genérica y reutilizable dentro de nuestro archivo src/styles/index.css:

@tailwind preflight;

Ahora simplemente colocamos las clases que engloban el estilo y comportamiento y obtenemos un componente más limpio y con estilos personalizados.

Ahora solo queda utilizar tantos TailCard como los necesites y continuar creando más componentes re utilizables y legibles, creados con metodología BEM para lograr algo increíble y sintetizado.

Código del ejemplo

¿Que sigue?

Podemos continuar leyendo la documentación de Tailwind y hacer uso de algunos plugins de Postcss ya que lo tenemos configurado para el proyecto.

Links:

José Carlos ( Joss )

Written by

23 years old computer systems engineer. Full stack developer with also more than two years of experience in web technologies, teacher at Ironhack.

More From Medium

Also tagged Components

Related reads

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade