Clases de diseño de Tailwind CSS

Tailwind CSS proporciona una amplia variedad de clases relacionadas con el diseño, que permiten a los desarrolladores controlar todos los aspectos de la página de una manera extremadamente flexible.

A continuación, explicaremos en detalle algunas de las clases de diseño más importantes.

1. Relación de aspecto (Aspect Ratio)

Las clases de Aspect Ratio te ayudan a establecer la relación de aspecto de un elemento, evitando que se estire o se comprima en el diseño responsive.

Clases principales:

2. Contenedor (Container)

La clase Container permite que un elemento contenedor se adapte de forma responsive a diferentes tamaños de pantalla. Se usa a menudo para establecer el ancho máximo del contenido.

Clases principales:

• container: hace que el elemento se convierta en un contenedor responsive.
• mx-auto: centra el contenedor horizontalmente.

Al usar estas clases, puedes crear contenedores con un ancho máximo responsive, lo que es muy útil al crear diseños, especialmente cuando quieres limitar el ancho del contenido para mejorar la legibilidad.

En estos ejemplos, el primer<div>siempre ocupará el 100% del ancho, mientras que el segundo<div>en pantallas grandes (lg) y tamaños de pantalla superiores, su ancho máximo se limitará a 1024px.mx-autoLa clase se utiliza para centrar el contenedor horizontalmente.

3. Diseño de columnas (Columns)

Las clases Columns se utilizan para implementar diseños de varias columnas.

Puedes controlar el número de columnas y el espacio entre ellas.

Clases principales:

• columns-{n}: establece el número de columnas.
• space-x-{size}: establece el espacio entre columnas.

4. Paginación

Las siguientes clases ayudan a los desarrolladores a controlar mejor el diseño de paginación y columnas de un documento, para mejorar la legibilidad y la estética de la salida impresa.

Clases principales:

• break-after-{value}: controla el comportamiento después de un salto de página.
• break-before-{value}: controla el comportamiento antes de un salto de página.
• break-inside-{value}: controla el comportamiento de los saltos de página dentro de un elemento.

Las clases anteriores se utilizan para controlar el comportamiento de división en páginas o columnas del contenido en impresiones o diseños de columnas:

• break-after-autoPermite que el navegador decida si dividir en páginas o columnas después de un elemento.
• break-after-avoidle dice al navegador que evite en lo posible dividir en páginas o columnas después de ese elemento.

Las clases anteriores se utilizan para controlar el comportamiento de división en páginas o columnas del contenido en impresiones o diseños de columnas.

• break-before-autoPermite que el navegador decida si dividir en páginas o columnas antes de un elemento.
• break-before-avoidle dice al navegador que evite en lo posible dividir en páginas o columnas antes de ese elemento.

Las clases anteriores se utilizan para controlar si se permite dividir en páginas o columnas dentro de un elemento en impresiones o diseños de columnas.

• break-inside-autoPermite que el navegador decida si dividir en páginas o columnas dentro de un elemento.
• break-inside-avoidle dice al navegador que evite en lo posible dividir en páginas o columnas dentro de ese elemento.

En este ejemplo, el<div>elemento se configura con un diseño de dos columnas (columns-2), que contiene cuatro<p>párrafos. El segundo<p>párrafo tiene unbreak-after-columnClase, esto fuerza un salto de columna después de ese párrafo, pero no permite un salto de página. Esto significa que si el contenido es suficiente, el contenido después del segundo párrafo comenzará en una nueva columna, en lugar de continuar en la siguiente línea de la misma columna. Los demás párrafos no tienen instrucciones especiales de división de columnas, por lo que fluirán naturalmente según su contenido.

5. Salto de línea de texto

A continuación se presentan las clases de utilidad en Tailwind CSS para controlar cómo se renderizan los fragmentos de elementos en múltiples líneas, columnas o páginas, junto con sus propiedades CSS correspondientes:

Las clases anteriores se utilizan para controlar el comportamiento de la decoración de los elementos (como bordes y fondos) en diseños de varias columnas o al paginar.

• box-decoration-cloneHará que cada fragmento de cuadro muestre la decoración completa.
• box-decoration-sliceEn cambio, cortará la decoración donde se divide el cuadro, de modo que la decoración permanezca visualmente continua.

Estas clases de utilidad pueden ayudar a los desarrolladores a controlar mejor el efecto visual de los elementos en diseños complejos.

6. Tamaño de caja

Tailwind CSS proporciona dos clases de utilidad para controlar el modelo de caja (box-sizing) de los elementos:

• box-border: calcula el tamaño total del elemento incluyendo el relleno y el borde.
• box-content: calcula el tamaño del elemento sin incluir el relleno ni el borde.

1、box-border

Propiedad CSS:

box-sizing: border-box;

Usa la clase de utilidad `box-border` para establecer la propiedad `box-sizing` del elemento en `border-box`. Esto significa que cuando se especifica una altura o anchura al elemento, el navegador incluirá el borde y el relleno del elemento.

Si un elemento tiene un tamaño de 100px × 100px, con un borde de 2px y un relleno de 4px, el tamaño total de renderizado del elemento será de 112px × 112px.

2、box-content

Propiedad CSS:

box-sizing: content-box;

Usa la clase de utilidad `box-content` para establecer la propiedad `box-sizing` del elemento en `content-box`. Esto significa que el navegador añadirá el borde y el relleno fuera del ancho o la altura especificados del elemento.

Si un elemento tiene un tamaño de 100px × 100px, con un borde de 2px y un relleno de 4px, el tamaño real de renderizado del elemento será de 112px × 112px, con un área de contenido interno de 100px × 100px.

Propiedad display

La propiedad `display` se utiliza para controlar el tipo de visualización del elemento y determina cómo se muestra el elemento en la página.

Use las clases de utilidad `table`, `table-row`, `table-cell`, `table-caption`, `table-column`, `table-column-group`, `table-header-group`, `table-row-group` y `table-footer-group` para crear elementos que se comporten como sus respectivos elementos de tabla.

Flotación

float-*Controla la posición de flotación del elemento, generalmente se usa para envolver texto.

Clases principales:

Limpiar flotación

En Tailwind CSS, las clases de utilidad para controlar la limpieza de flotación de un elemento y sus propiedades CSS correspondientes son:

isolate

Estas clases de utilidad permiten a los desarrolladores controlar el comportamiento del contexto de apilamiento del elemento, afectando así a cómo el elemento y sus descendientes participan en el orden de apilamiento.

La clase `isolate` ayuda a crear un entorno aislado donde el orden de apilamiento del elemento no se ve afectado por elementos externos, mientras que `isolation-auto` permite que el navegador maneje el contexto de apilamiento según las reglas predeterminadas.

Use las clases de utilidad `isolate` y `isolation-auto` para controlar si un elemento debe crear explícitamente un nuevo contexto de apilamiento.

object-fit

A continuación se presentan las clases de utilidad para controlar cómo se escala el contenido de los elementos reemplazados y sus propiedades CSS correspondientes:

Use `object-cover` para ajustar el tamaño del contenido del elemento a fin de cubrir su contenedor: