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

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.

Podemos personalizar los estilos predefinidos de Tailwind o ampliarlos añadiendo colores, espaciados, animaciones, etc.

De este modo definimos toda la base del diseño del sitio web en un único lugar donde podemos hacer revisiones, actualizaciones y ajustes de forma rápida y sencilla.

Los diseñadores también están más cerca de la implementación real de sus ideas, incluso pueden cambiar ellos mismos los tokens de diseño fácilmente al comprobar la configuración. Así, se mejora la colaboración entre diseñador y desarrollador, convirtiendo el archivo de configuración en un acuerdo de estilado entre ambos.

Por ejemplo:

module.exports = {
    content: ['./src/**/*.{html,js}'],
    theme: {
        colors: {
            'brand': '#1fb6ff',
            'secondary': '#7e5bef',
        },
        fontFamily: {
            sans: ['Graphik', 'sans-serif'],
            serif: ['Merriweather', 'serif'],
        },
        extend: {
            spacing: {
                '8xl': '96rem',
                '9xl': '128rem',
            },
        }
    },
}

En el ejemplo podemos ver los archivos que forman el contenido donde las clases de Tailwind son usadas, también podemos ver como los colores y la fuente están siendo sobreescritas y como los espaciados son extendidos.

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:

p-[22px] // will apply 22px of padding 
w-[calc(100%-20px)] // will apply the calculated width

Házlo una vez y reúsalo

Los plugins de Tailwind te permiten encapsular estilos complejos en utility-classes personalizadas, puedes importar posteriormente esos plugins o los ya existentes en cualquier proyecto para tenerlos todos funcionando desde el primer momento.

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.

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.

No te olvides de las mejores prácticas

El enfoque de estilo de Tailwind conlleva a código y estilos que se repiten, lo cual llama la atención del desarrollador, ya que al repetir una estructura de estilo muchas veces, se le está advirtiendo que debe moverla a un componente de diseño o función donde se puedan unificar y reutilizar.

De este modo, se motiva a los desarrolladores a seguir principios como DRY (Do not Repeat Yourself), separación de responsabilidades y modularidad.

Algo similar ocurre cuando se escriben docenas de clases en el mismo elemento, la monstruosa cadena de texto en el elemento probablemente significa que se debe encontrar una mejor estructura de maquetado para llegar al mismo resultado, dividiendo las clases entre distintos elementos.

Código abierto

Tailwind es un proyecto de código abierto, lo que significa que su código fuente está disponible libremente para que cualquiera pueda utilizarlo, modificarlo, distribuirlo y, lo que es más importante, mejorarlo.

¿Cuáles son las ventajas de que Tailwind sea de código abierto?

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.

La buena noticia es que hay muchas extensiones disponibles para habilitar el autocompletado de código, ocultar las largas cadenas de clases "in-line" u organizar las clases de Tailwind.

¿Supera Tailwind a otros frameworks CSS?

La elección de un framework CSS depende de las necesidades y objetivos específicos del proyecto. 

Hay ciertas funciones y características de Tailwind CSS que pueden hacer que se adapte mejor a determinados proyectos en comparación con otros frameworks.

Entonces, ¿por qué elegir Tailwind y no otros frameworks CSS?

El enfoque basado en la utilidad, la personalización, el rendimiento, la consistencia y la facilidad de uso permiten acelerar el desarrollo, aumentar la calidad de los temas, mejorar la representación de la marca y agilizar el funcionamiento del sitio web.

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

Plataforma de Experiencia Digital (DXP)

Nuestra solución principal, DXP, 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.

Proyectos para nuestros clientes

La mayoría de los proyectos que implementamos están basados en nuestra solución DXP. Por lo tanto, todos los proyectos comienzan utilizando nuestras bases preestablecidas de Tailwind y Quartz como Sistema de Diseño. 

Posteriormente adaptamos fácilmente nuestro modelo inicial a las necesidades del cliente, haciendo de nuestro sistema de creación de estilos un estándar en nuestros proyectos, lo que conlleva un mayor rendimiento en el desarrollo, coherencia, mejores resultados y unas bases sólidas para cada proyecto.

De nuestros desarrolladores

"Poder escribir plugins, que generan utility-classes personalizadas, es algo que no tenía en otros frameworks que he utilizado, y me parece muy útil.

Es mucho más rápido escribir CSS con utility-classes, una vez que puedes recordarlas".

John Durance, Desarrollador Full Stack en 1xINTERNET