Por qué y cómo usamos Tailwind CSS

En este artículo te presentamos Tailwind CSS, destacando sus características más importantes para nosotros en 1xINTERNET y explicando por qué lo elegimos como nuestro framework CSS estándar. Tailwind CSS es compatible con Drupal, Symfony, Twig, así como con ReactJS y Web Components. Te enseñamos cómo logramos una integración perfecta con estas tecnologías y proporcionamos ejemplos con código.

¿Qué es Tailwind CSS?

Tailwind es un framework CSS, una herramienta para el desarrollo frontend que agiliza el diseño de la interfaz de usuario y mejora la eficacia de la creación de estilos y temas.

En lugar de proporcionar componentes diseñados en un estilo específico como ocurre con otros frameworks de interfaz de usuario, Tailwind CSS proporciona utility-classes de bajo nivel que pueden personalizarse y ampliarse para adaptarse a las necesidades del cliente así como a la creatividad del diseñador.

Este enfoque aporta flexibilidad y control, al mismo tiempo que permite asegurar la coherencia de forma más sencilla.

¿Por qué Tailwind CSS?

Tailwind CSS es una herramienta flexible y eficaz. El enfoque orientado a la utilidad y las facilidades que ofrece para crear sistemas de diseño personalizables y reutilizables nos ahorra tiempo y esfuerzo durante el proceso de desarrollo, al tiempo que ayuda a mantener un diseño coherente y responsive.

Enfoque "Utility First”

Tailwind es un framework CSS que prioriza la utilidad, lo que significa que se centra en agilizar y optimizar el proceso de creación de estilos.

Tal y como se ha comentado al principio del artículo, en lugar de proporcionar un conjunto de estilos o componentes predefinidos, Tailwind proporciona un conjunto de utility-classes, con nombres fácilmente comprensibles y coherentes, que se pueden personalizar o extender y, a su vez, utilizar para crear y personalizar los elementos que componen la interfaz de usuario.

Esto permite una mayor personalización. Los diseñadores pueden ser más creativos a la vez que establecen principios de diseño consistentes y los desarrolladores pueden aplicar rápidamente las clases y afinar los detalles para ajustarlos al diseño.

El resultado para el cliente es un diseño más personalizado y representativo en menos tiempo y una mayor rapidez de desarrollo.

El objetivo principal de utility-classes es que sean comprensibles y representativas, en lugar de inventar convenciones de nomenclatura para las clases, el resultado de aplicarlas se incluye en el nombre.

Algunos ejemplos:

bg-white	// bg means background and “white” is the colour 
p-3 		// p means padding
m-3 		// m means margin and “3” the amount applied

Además, puedes aplicar estas clases de forma condicional, en función del tamaño de la pantalla, el tema del usuario o lo que esté haciendo el cursor (desplazar, enfocar...).

Algunos ejemplos:

dark:bg-black	// dark: will only apply when on dark mode
sm:p-3 		// sm: will only apply for mobile screensize
hover:text-red 	// hover: will only apply when hovering

Con Tailwind podemos utilizar utility-classes, lo que permite hacer nuestro método de creación de estilos más claro, ágil, coherente, creativo y representativo.

Define un sistema de diseño

El archivo de configuración de Tailwind proporciona un punto único de referencia para la base de nuestro proceso de creación de estilos y temas.

Sin limites

Las mejores prácticas de Tailwind promueven el uso de la configuración como el principal punto de referencia, lo que no significa que no se pueda actualizar o utilizar algunos valores personalizados en algún caso especial en el que tu diseñador perfeccionista haya definido para un diseño único.

Por ejemplo:

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      addComponents({
        '.btn-demo': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
        '.btn-demo-blue': {
          backgroundColor: '#3490dc',
          color: '#fff',
        },
        '.btn-demo-red': {
          backgroundColor: '#e3342f',
          color: '#fff',
        },
      })
    })
  ]
}

Además, los presets de Tailwind permiten exportar y reutilizar un archivo de configuración completo de Tailwind. Podemos definir fácilmente un tema base o una configuración que incluye muchas características y mantenerla separada de la configuración personalizada de cualquier proyecto específico que la vaya a utilizar.

Con Tailwind podemos reutilizar características de estilo encapsuladas mediante plugins o configuraciones completas mediante presets, lo que permite garantizar la reusabilidad y la modularidad.

Reduce el tamaño y garantiza el rendimiento

Tailwind proporciona diferentes métodos "listos para producción" para crear y minimizar los estilos.

Por ejemplo podemos eliminar todas las clases que tenemos en nuestra configuración (incluyendo las clases predefinidas de Tailwind) si no están siendo utilizadas en nuestras plantillas.

También podemos utilizar el modo "jit" que significa "just in time". Con este modo Tailwind genera el CSS justo cuando se necesita.

Estos métodos reducen la cantidad de CSS que utiliza nuestro proyecto, lo que permite que el sitio web o la aplicación sean más ligeros y que el tiempo de carga sea más rápido.

Extensiones y herramientas

Tailwind puede ser difícil de usar si no se prepara el IDE y las extensiones adecuadamente.

Algunos de los problemas son, por ejemplo, que el desarrollador necesita recordar las nuevas utility-classes, que el código puede aumentar su tamaño debido a los grandes estilos de clases "in-line", o clasificar las clases que utilizamos.

¿Cómo lo usamos en 1xINTERNET?

Nuestra pila tecnológica en el frontend consiste en las siguientes tecnologías:

• Capa de "theming" Drupal utilizando Twig
• Aplicaciones ReactJS tanto como aplicación de página única (SPA) como webapps integradas.
• Web Components para crear elementos reutilizables para tecnologías frontend arbitrarias y sistemas de diseño

En la mayoría de nuestros frontends utilizamos todas las tecnologías mencionadas. Un proyecto web típico cuenta con un frontend tradicional que utiliza la capa de "theming" Drupal pero todos los elementos interactivos del sitio web se desarrollan con ReactJS. Para muchos proyectos esta es una configuración óptima. Descubre por qué emparejar la tecnología frontend de Drupal con ReactJS es una buena opción.

Los elementos compartidos en Twig y React se construyen utilizando Web Components. Ejemplos de elementos compartidos son botones, tarjetas, pestañas, listas, etc. Para facilitar la revisión de los elementos compartidos los integramos en el sistema de diseño.

Utilizamos Tailwind CSS para todas las tecnologías y compartimos la configuración. Como resultado, un cambio de diseño implementado en Tailwind CSS se aplica inmediatamente a todos los Web Components, todas las plantillas Twig y todas las webapps React de un sitio web.

Para nuestros desarrolladores, este enfoque facilita la aplicación de cambios en el frontend y permite entender fácilmente el proceso de creación de estilos para todas las tecnologías. Lo mismo ocurre con los distintos proyectos. Los desarrolladores pueden colaborar en todos los proyectos, porque intentamos reutilizar nuestras tecnologías de frontend en la medida de lo posible.

1xDXP

Nuestra solución principal, 1xDXP, es una plataforma web que utilizamos para todos los proyectos.La plataforma consiste en un sistema de gestión de contenidos Drupal con capa de "theming" creado mediante Web Components.

Cuenta con un sistema de diseño integrado que se configura fácilmente para trabajar con Figma. Tanto la capa de "theming" como la biblioteca de componentes web están construidas con Tailwind CSS.