El poderoso framework Tailwind CSS proporciona un sistema de espaciado ampliamente configurable. A través de él, puedes gestionar las dimensiones y el espaciado de tus elementos web de manera precisa. Este sistema es altamente flexible y se puede modificar según las necesidades de diseño y desarrollo. Tailwind parte de una definición predeterminada de unidades, que abarca desde cero hasta valores mayores, cada uno con su función especial.
¿Cómo funcionan las unidades de espaciado?
Las unidades en Tailwind comienzan desde cero, sin espaciado, y se utilizan palabras como SPX para representar un píxel. De esta manera, se pueden implementar múltiples unidades, desde cero hasta seis, dentro de Tailwind, manejando distintas escalas predefinidas. Aquí está lo fascinante: cuatro unidades equivalen a un rem, que a su vez equivale a seis píxeles. Así, Tailwind da saltos de manera incremental en su espaciado: seis, ocho, diez, doce, dieciséis, veinte, y veinticuatro.
El sistema espaciado no solo es útil, sino que será tus ojos y manos a lo largo de cualquier proyecto que utilices este framework.
/* Ejemplo de clases de Tailwind CSS para espaciado */.h-16{height:4rem;}.w-32{width:8rem;}.mx-auto{margin-left: auto;margin-right: auto;}
¿Dónde se aplica el espaciado?
El espaciado en Tailwind es aplicable en distintas propiedades CSS, lo que permite manejar la altura (height), el ancho (width), los márgenes (margin) y el relleno (padding), adaptando estos atributos de manera eficiente y flexible según el diseño buscado.
¿Cómo ajustar altura y ancho?
Para ajustar las dimensiones de los elementos, utilizamos clases específicas. Por ejemplo, una clase h-8 modifica la altura de un elemento a ocho unidades, o dieciséis unidades si usamos h-16. Del mismo modo, para el ancho (width), podemos usar w-16 y w-32, consiguiendo finalmente elementos cuadrados si se usa la misma unidad en ambas direcciones.
Además, Tailwind te permite modificar el ancho mediante porcentajes, utilizando fracciones. Este método es extraordinariamente útil cuando se desea que los elementos se adapten a diferentes contextos de tamaño.
/* Ejemplo de manejo del ancho con fracciones */.w-1/2{width:50%;}.w-1/3{width:33.333333%;}.w-1/4{width:25%;}
¿Qué son Margin y Padding y cómo se utilizan?
Los márgenes (margin) y los rellenos (padding) manejan el espacio tanto dentro como fuera de un elemento, respectivamente. Con Tailwind, puedes modificarlos de forma uniforme o en direcciones específicas. Por ejemplo:
m-t4 aumenta el margen superior en cuatro unidades.
p-l4 incrementa el relleno a la izquierda con cuatro unidades.
Es una manera poderosa de optimizar tus diseños manteniendo un control detallado sobre la distribución del espacio.
/* Ejemplo de clases CSS para márgenes y rellenos */.mt-8{margin-top:2rem;}.ml-8{margin-left:2rem;}.p-4{padding:1rem;}.px-6{padding-left:1.5rem;padding-right:1.5rem;}
¿Cómo usar espaciado en el eje horizontal y vertical?
Tailwind proporciona funcionalidad avanzada para aplicar espacios en ejes específicos. Utilizando las clases m-x-auto en el eje horizontal o p-y-2 en el eje vertical, puedes ajustar el espacio dependiendo de tus necesidades. Esta ventaja es particularmente útil cuando se busca centrar elementos o proporcionar un mismo espaciado a lo largo del eje x o y.
/* Ejemplo de control de espaciado en los ejes */.mx-auto{margin-left: auto;margin-right: auto;}.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
Este conocimiento sobre dimensiones y espaciado será un pilar para tu eficiencia en el diseño utilizando Tailwind. Aprovecha estas herramientas y da un paso audaz hacia el dominio de un diseño consistentemente limpio y estructurado. ¡Anímate a seguir aprendiendo y a experimentar con Tailwind CSS para desarrollar proyectos increíbles!
El valor de 16px es el default de los browsers, si defino un tamaño de fuente de 10px para el elemento html, entonces 1 rem son 10px y cambia todo el sistema. Los rem son relativos al tamaño de la fuente del elemento html.
Mi problema con la estandarización de espacios se acabó
Tienes razón, realmente Tailwind es muy bueno con los espaciados.
También permite el uso de márgenes negativas, aquí el ejemplo:
Tailwind utiliza un sistema de espacios que se puede configurar. Se maneja internamente utilizando rem. Se puede visualizar desde el archivo tailwind.config.full.js.
Se puede utilizar en:
Height.
Width.
Margin.
Padding.
En las clases de los elementos se añaden cosas como: h-32 w-1/2 pt-2 mx-auto
tailwind es más interesante de lo que parce. por lo menos me va gustando más que boostrap
¿Por qué?
Baldan, a mi forma de ver con Tailwind te dan muchos estilos definidos, pero no te dan todo como lo hace Bootstrap, sin querer generar discordia pienso que Bootstrap es una herramienta demasiado facilista, te dan las cosas tan hechas que los Front desarrollados con Bootstrap se parecen, creo que es perfecta para un Backend que no le interesa lo visual y así puede desarrollar un Front de manera más rapida y con buen diseño.
Está muy interesante esto! .
Nunca pares de aprender
hasta el momento se ve genial tailwind
Cada clase ha sido un 🤯 continuo.
Tailwindcss es una maravilla
Parece que la información de los estilos va en el mismo html, lo cuál no sé hasta que punto es algo bueno.
Me interesa esa forma con el @apply, es más engorrosa y lenta para depurar, pero también me parece muy absurdo tener 100 clases por etiqueta. Me hace mucho ruido eso.
Boom me encanta!
¿entre bootstrap y tailwind, cual?
Wow José, you got me in this one 😂.
Depende demasiado de cual te guste más y con cual esté trabajando todo tu equipo de trabajo. Pero creo que tailwind está ganando mucho terreno últimamente, así que vale la pena aprenderlo primero y después adaptarte a bootstrap si tu equipo está usándolo.
Pero a fin de cuentas es solo una opinión. Probablemente más compañeros te compartirán distintos puntos de vista, al final, is up to you my friend.
¡Hola!
Esto de acuerdo con @nardoayala. Cada uno tiene sus pros y sus contras, al final depende de con cuál te sientes más cómodo al trabajar o con el que estén trabajando en tu equipo de trabajo.
Un saludo.
una pregunta donde puedo conseguir toda la lista completa de esas clases que el profesor escribe, supongo que Tailwind CSS debe tener una lista de todo eso ¿cierto? Solo que quiero saber es donde esta ese archivo o donde los puedo consultar para observar ? Gracias y espero respuestas :)
Y con este marco de trabajo puedo utilizar la metodología de BEM?
Sí, puede ser una mezcla potente.
¡Cuéntanos qué tal te va usando ambas!
Normalmente no es necesario pero puede ser de utilidad normalmente cuando extraes un componente.
Cuentame que tal.
El sistema de espaciado de Tailwind afecta a las propiedades:
Height
Width
Margin
Padding
Puedes configurar sus medidas en el archivo tailwind.config.js,
Aquí hay buena información al respecto
Nunca había utilizado Tailwind CSS y es increíble <3
Me recuerda a las utilidades de bootstrap, solo que aquí hay muchas más.
Conociendo ya las propiedades del sistema de espacios vamos a ir a nuestro index.html empezaremos con la altura y el ancho
h-8 - modifica altura
w-16 - modifica el ancho
Otra forma de cambiar el ancho de nuestros elementos por porcentajes, si vamos los a la documentación veremos que el porcentaje lo maneja en fracciones entonces tenemos
w-1/2 - 50% - toma el 50% del ancho
w-1/3 - 33.33333%
Tengo un problema cuando quiero aplicar en un tema un estilo de boxShadow diferente llamado soft... mi configuracion es la siguiente:
Hola Luis, ¿Haz revisado que en tu hoja de estilos este creandose esa clase?. En la clase el profesor creo 'style.css'. Si en caso no se esta generando tu clase '.shadow-soft' en tu archifo de estilos, es probable que no estes pasandole el archivo de configuración tailwind personalizado a tu archivo 'postcss.config.js'. El profesor estaba usando los parámetros por defecto del tailwind. Si en caso deseas agregar tus propios parámetros, debes editar el archivo que menciones antes. Como indica en la documentación de tailwind:
Ejemplo mi caso:
Luego de agregar esos cambios, deberás correr nuevamente el comando 'npm run build' dentro de tu proyecto como en el ejemplo del profesor, para que se genere tu hoja de estilos con los cambios. Como en la siguiente pantalla:
