Advertisement
  1. Web Design
  2. CSS

Introducción a Tailwind CSS: Un marco Utility-First CSS

by
Read Time:3 minsLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Hoy les voy a mostrar cómo comenzar con Tailwind CSS, un marco CSS altamente personalizable que puede usar para crear rápidamente sus propias páginas web y componentes. Funciona al proporcionar una lista de clases que puede usar para controlar cada aspecto visual de su página.

Video: Tailwind CSS

En este tutorial

Aquí hay un desglose de lo que está por venir.

  • ¿Qué es Tailwind CSS?
  • Un ejemplo simple con la versión CDN
  • Funcionalidad avanzada con la versión NPM
  • Personalizar Tailwind CSS

¿Qué es Tailwind CSS?

En resumen, Tailwind es un marco CSS, pero es diferente de de Bootstrap y Foundation. Proporciona solo los principios básicos de lo necesario para diseñar sus páginas web, como márgenes, tamaños, posicionamiento, colores, ese tipo de cosas. No encontrará componentes listos para usar, como botones y barras de navegación. Depende de ti usar Tailwind para crear sus propios componentes. Esto brinda una inmensa libertad donde marcos modernos solo restringen lo que creas; ¡no hay necesidad de anular nada!

Un ejemplo simple con la versión CDN

Para tener una mejor idea de cómo funciona todo esto, avancemos y hagamos una demostración simple usando Tailwind.

Hay dos formas de usar Tailwind; ya sea con la versión CDN que está alojada para nosotros o mediante un administrador como NPM. Usar el CDN es más fácil, aunque nos restringe de ciertas maneras:

  • No puedes personalizar el tema predeterminado de Tailwind
  • No puedes usar directivas como @apply, @variants, etc.
  • No puedes habilitar funciones como group-hover (desplazamiento del grupo)
  • No puedes instalar complementos de terceros

Si estas cosas no le molestan, no dude en utilizar el enlace CDN e insertarlo en el encabezado de su página.

Una vez hecho esto, comencemos agregando un contenedor, con otro div dentro.

Todavía no estamos agregando ninguna clase, pero es libre de llenar esto con contenido ficticio.

Agreguemos algunas clases Tailwind. Por ejemplo:

  • Un margen en el contenedor, a lo largo del eje x, con un valor de auto. Que se parece a esto: mx-auto
  • ¿Y qué tal un poco de relleno en la parte superior e inferior? La misma idea: py-4. El 4 aquí no es un valor px, en realidad es un multiplicador del valor base, que es 2.5rem.
  • A continuación: un ancho, que anotamos como este: w-3/4. Nuevamente, este valor necesita ser interpretado. Significa tres cuartos de un rem, que es .75rem.
  • Las utilidades de Flexbox también están disponibles, así que agreguemos algunas al div anidado dentro de nuestro contenedor. md: flex items-center significa que en pantallas medianas usamos display: flex; y dictamos que los elementos flexibles estén centrados.

Con una o dos clases de utilidad más en la mezcla, terminamos con esto:

Para visualizar lo que tenemos un poco mejor, eche un vistazo al repositorio en Github.

Para llevar esta demostración un paso más allá, eche un vistazo a la versión en video incrustado del tutorial. Aprenderá la funcionalidad avanzada usando la versión NPM y cómo personalizar el marco Tailwind CSS que usa.

Conclusión

Controlar el diseño básico de su marcado usando nada más que clases es realmente intuitivo. Hay quienes argumentan que no separa el formulario de la estructura, pero si lo encuentra ayuda a crear páginas web más rápidamente, ¡no hay nada de malo en eso!

Mira el curso completo de Tuts+ de Jeremy McPeak

En este curso, Jeremy McPeak le presentará los fundamentos de Tailwind, brindándole todo lo que necesita para comenzar a usarlo para diseñar sus aplicaciones.

Enlaces relacionados:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.