Si usas Tailwind CSS probablemente uses la clase .container para limitar el ancho máximo de la página. En cambio, si alguna vez has querido añadir algún elemento dentro del contenedor que ocupe todo el ancho, te habrás dado cuenta que por defecto no puedes.
A eso se le llama full bleed. Visualmente es algo así:
Para hacer esto deberemos añadir estas clases a nuestro CSS:
.container-custom { display: grid; grid-template-columns: 1fr min(100ch, calc(100% - 64px)) 1fr; } .container-custom > * { grid-column: 2; } .full-bleed { grid-column: 1 / -1; }
La clase .container-custom la usaremos en sustitución de la clase .container de Tailwind. Los estilos aplicados indican que se usará un grid con tres columnas, la central ocupará un ancho fijo, que será el valor menor entre 100ch y el 100% del ancho menos 64 píxeles, de este modo conseguimos adaptarlo a resoluciones grandes y pequeñas.
La unidad de medida ch corresponde al ancho del número "0" en la fuente que estés usando. Puedes jugar con estos valores y unidades de medida para adaptarlo a lo que necesites, tanto el margen de 64 píxeles como el número de columnas o el ancho con ch.
Luego, con el selector .container-custom > * indicamos que todos los elementos dentro del contenedor irán a la columna central. Podemos crear más selectores parecidos si vamos a poner elementos en las otras columnas a modo de sidebar.
Finalmente, la clase .full-bleed sirve para indicar a los elementos que la usen que deben ocupar el espacio entre la primera y la última columna.
Con estas pocas líneas de CSS conseguimos lo que queríamos. Puedes ver este artículo de Josh Comeau, que es donde yo encontré esta solución.
Si prefieres no complicarte demasiado y no te importa tirar de dependencias, también puedes instalar el paquete NPM tailwindcss-container-bleed donde tienes más opciones, aunque ya te advierto que no lo he probado y desconozco si es compatible con cualquier versión de Tailwind.