Tailwind CSS: un marco CSS y una API de utilidad para un diseño rápido y receptivo

Marco CSS Tailwind

Si bien me dedico a la tecnología a diario, no tengo tanto tiempo como me gustaría para compartir las complejas integraciones y la automatización que mi empresa implementa para los clientes. Además, no tengo mucho tiempo de descubrimiento. La mayor parte de la tecnología sobre la que escribo son empresas que buscan Martech Zone cubriéndolos, pero de vez en cuando, especialmente a través de Twitter, veo algunos rumores sobre una nueva tecnología que necesito compartir.

Si trabaja en diseño web, desarrollo de aplicaciones móviles o incluso simplemente configura un sistema de administración de contenido, probablemente haya luchado con las frustraciones de estilos en competencia en múltiples hojas de estilo. Incluso con las increíbles herramientas de desarrollo integradas en cada navegador, rastrear y limpiar CSS puede requerir demasiado tiempo y energía.

Marcos de CSS

En los últimos años, los diseñadores han hecho un trabajo asombroso al lanzar colecciones de estilos que están preparados y listos para usar. Estas hojas de estilo CSS son más conocidas como CSS Frameworks, y tratan de acomodar todos los diferentes estilos y capacidades de respuesta para que los desarrolladores puedan simplemente hacer referencia a un marco en lugar de crear un archivo CSS desde cero. Algunos marcos populares son:

  • Bootstrap - un marco que ha evolucionado durante una década, introducido por primera vez por Twitter. Ofrece innumerables funciones. Tiene desventajas, requiere SASS, es difícil de sobrecargar, depende de JQquery y es bastante pesado de cargar.
  • Bulma - un marco limpio que es amigable para los desarrolladores y no depende de JavaScript.
  • Base - un marco CSS más genérico y utilizable que tiene toneladas de componentes que se pueden personalizar fácilmente. Además, hay Fundación para el correo electrónico y Interfaz de usuario de movimiento para animaciones.
  • Kit de interfaz de usuario - una combinación de HTML, JavaScript y CSS para desarrollar su interfaz de forma rápida y sencilla.

Marco CSS Tailwind

Mientras que otros frameworks hacen un gran trabajo acomodando elementos populares de la interfaz de usuario, Tailwind usa una metodología conocida como CSS atómico. En resumen, Tailwind organizó ingeniosamente los nombres de las clases utilizando lenguaje natural para hacer lo que dicen que hacen. Entonces, aunque Tailwind no tiene una biblioteca de componentes, la capacidad de construir fácilmente una interfaz potente y receptiva con solo hacer referencia a los nombres de las clases CSS es elegante, rápida e incomparable.

Aquí hay algunos ejemplos realmente geniales:

Cuadrículas CSS

columna css columnas de cuadrículas de inicio

Degradados CSS

gradientes css

CSS para compatibilidad con el modo oscuro

modo oscuro css

Tailwind también tiene un fantástico extensión disponible para VS Code para que pueda identificar e insertar clases fácilmente desde el editor de código de Microsoft.

Aún más ingenioso, Tailwind elimina automáticamente todo el CSS no utilizado cuando se crea para producción, lo que significa que su paquete de CSS final es el más pequeño posible. De hecho, la mayoría de los proyectos de Tailwind envían menos de 10kB de CSS al cliente.

¿Qué piensas?

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.