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.
Tailwind CSS nos permite unificar y estandarizar el proceso de creación de estilos para cualquier sitio web o aplicación, lo que permite acelerar el desarrollo y asegurar la consistencia de la interfaz de usuario.
¿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.
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.
Con Tailwind sólo necesitamos mantener un punto único de referencia con la base de todos los estilos del proyecto, lo que permite garantizar la consistencia.
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
Con Tailwind podemos configurar la base pero seguir utilizando valores personalizados para los elementos que difieren de los estándares definidos, lo que permite una mayor flexibilidad y libertad.
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.
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.
Con Tailwind podemos reducir la cantidad de archivos de estilo generados, lo que permite disminuir el tiempo de carga y mejorar el rendimiento.
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.
Con Tailwind tenemos indicaciones más claras de cuando no estamos siguiendo las mejores prácticas creando las estructuras de markup de nuestros sistemas.
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?
Colaboración
Al ser de código abierto, cualquiera puede contribuir al desarrollo de Tailwind CSS.
Esto puede resultar en un framework más sólido y robusto ya que más personas contribuyen con documentación, ideas, código y corrección de errores.
Transparencia
El software de código abierto suele desarrollarse de forma transparente, lo que significa que cualquiera puede ver cómo está construido y cómo funciona.
Esto puede ser útil para los desarrolladores que quieran entender el funcionamiento interno de Tailwind CSS y saber cómo personalizarlo para satisfacer sus necesidades.
Flexibilidad
Al ser de código abierto, los desarrolladores pueden modificar el código fuente de Tailwind CSS para adaptarlo a sus necesidades específicas.
Esto puede ser útil para proyectos que requieren estilos personalizados o funcionalidades que no proporciona el framework por defecto.
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.
Personalización
Como se mencionó anteriormente, Tailwind CSS permite un alto grado de personalización, lo que significa que puede crear sus propios estilos o anular los estilos predeterminados para satisfacer las necesidades específicas de su proyecto.
Esto puede ser útil para los desarrolladores que buscan un mayor control sobre el diseño de sus proyectos y desean afinar los estilos para que coincidan con los requisitos de diseño.
Rendimiento
Tailwind CSS genera una cantidad mínima de CSS, lo que puede mejorar el rendimiento del sitio web. En compañía de postprocesadores como PostCSS podemos reducir la cantidad de CSS generado y con el modo JIT podemos procesar sólo las clases que estamos utilizando.
Facilidad de uso
Tailwind CSS es fácil de usar, incluso para los desarrolladores que no se especializan en el frontend y la parte de estilo de los sitios web. Proporciona una documentación clara y una sintaxis sencilla para aplicar utility-classes significativas al markup, lo que facilita a los desarrolladores la aplicación de cambios y reduce el código de estilo necesario al tiempo que se garantiza que la configuración va a asegurar la consistencia.
Consistencia
Al utilizar un conjunto coherente de utility-classes, los desarrolladores pueden garantizar que los estilos aplicados a los distintos elementos de un proyecto sean consistentes y sigan los mismos principios de diseño. Esto puede facilitar a los clientes la compresión de las opciones de diseño y la retroalimentación.
Otros frameworks pueden ofrecer un desarrollo más rápido con menos personalización (basado en componentes), o la misma personalización pero con peor rendimiento y menos coherencia.
¿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
"Me gusta especialmente en combinación con PostCSS que deshace todo el CSS de Tailwind del result.css que no se utiliza en el proyecto y mantiene el archivo result.css lo más pequeño posible.
Tener un tailwind.config.js donde se puede configurar simplemente TODO en un solo lugar, ya sea mediante la personalización de los valores predeterminados o la incorporación de nuevos valores predeterminados es un gran ahorro de tiempo.
Siempre he pensado que tener muchas utility-classes en el código lo hace ilegible, pero es todo lo contrario: puedo visualizar inmediatamente lo que voy a ver al final sólo por las clases que se utilizan, mientras que cuando utilizo clases personalizadas tengo que mirar primero varios CSS personalizados para saber lo que está pasando".
Norman Kämper-Leymann, Desarrollador Full Stack en 1xINTERNET
"Me gusta que ayude a los desarrolladores a pensar también en el estilo como un sistema (en lugar de utilizar nombres de clase aleatorios y valores aleatorios) y ayuda a mantener la coherencia en todo el código base".
Tamás Hajas, Desarrollador Frontend en 1xINTERNET
Otros artículos destacados
Pasos principales para desarrollar un proceso de diseño colaborativo
Un buen flujo de trabajo colaborativo entre diseñadores y desarrolladores puede contribuir al éxito...
Trabajo colaborativo entre diseñadores y desarrolladores
La colaboración entre diseñadores y desarrolladores es un factor fundamental para el éxito de un...