Fondos y bordes
Propiedades del fondo
Establecer el color de fondo es muy simple con Tailwind. Si queremos utilizar un color predeterminado basta con usar la clase bg-nombrecolor. Por ejemplo: bg-red-700.
Para poner una imagen de fondo, utilizaremos el prefijo bg seguido de la url de la imagen entre corchetes. Por ejemplo:
<div class="bg-[url(/road.webp)] size-40"></div>
Para repetir o posicionar imágenes de fondo tenemos varias clases auxiliares:
- background-repeat → Repite la imagen (o no) en función de si la imagen no cubre todo el fondo. Por ejemplo bg-repeat, bg-repeat-x, bg-repeat-y, bg-no-repeat.
- background-position → Si la imagen no se repite y no ocupa todo el fondo, podemos posicionarla en el elemento con clases como bg-top, bg-top-left, bg-center, bg-left, etc...
- background-size → Para controlar el tamaño de la imagen. Podemos utilizar un valor personalizado entre corchetes como bg-size-[auto_100px] (100px de alto manteniendo el ancho proporcional), o usar bg-contain (que quepa toda la imagen ajustada manteniendo proporciones) o bg-cover (ocupar todo el contenedor aunque haya partes no visibles).
<div class="p-2 flex gap-2">
<div class="size-24 bg-yellow-100 bg-[url(/vite.svg)] bg-top bg-no-repeat"></div>
<div class="size-24 bg-yellow-100 bg-[url(/vite.svg)] bg-center bg-no-repeat"></div>
<div class="size-24 bg-yellow-100 bg-[url(/vite.svg)] bg-bottom-right bg-no-repeat"></div>
</div>
<div class="p-2 flex gap-2">
<div class="size-24 bg-yellow-100 bg-[url(/road.webp)] bg-size-[auto_50px] bg-center bg-no-repeat"></div>
<div class="size-24 bg-yellow-100 bg-[url(/road.webp)] bg-contain bg-center bg-no-repeat"></div>
<div class="size-24 bg-yellow-100 bg-[url(/road.webp)] bg-cover bg-center bg-no-repeat"></div>
</div>
También podemos crear gradientes de color utilizando las clases prefijadas con bg-linear-*, bg-radial-* y bg-conic-*. Estas clases se apoyan en las clases from-*, to-* y via-* para establecer los colores de inicio, final e intermedios del gradiente.
<div class="h-12 w-24 bg-linear-to-r from-red-500 to-blue-500"></div>
<div class="h-12 w-24 bg-linear-to-r from-indigo-500 via-pink-500 to-yellow-500 ..."></div>
<div class="size-12 rounded-full bg-radial from-white to-blue-500"></div>
<div class="size-12 rounded-full bg-radial-[at_35%_35%] from-white to-red-500 to-70%"></div>
<div class="size-12 rounded-full bg-conic/decreasing from-violet-700 via-lime-300 to-violet-700"></div>
Propiedades del borde
El borde de un elemento se gestiona con clases que empiezan con el prefijo border-* para todo el borde o border-x-* (izquierda y derecha), border-y-* (arriba y abajo), border-t-* (arriba), border-b-* (abajo), border-l-* (izquierda), border-r-* (derecha), border-s-* (inicio), border-e-* (final).
Las propiedades que podemos gestionar son:
- border-width → Anchura del borde. Ejemplos: border (1px), border-4 (4px), border-[1%].
- border-color → Color del borde. Ejemplo: border-red-500.
- border-style → Estilo del border. Ejemplos: border-solid, border-dashed, border-dotted.
- border-radius → Curvatura del borde. Ejemplos: rounded-xs (2px), rounded-lg (8px), rounded-[5%], rounded-full (máximo, en elementos del mismo ancho y alto crea un círculo).
<div class="size-16 border-2 border-red-500 border-dashed rounded"></div>
<div class="size-16 border-4 border-blue-500 border-dotted rounded-full"></div>
También se puede gestionar la separación entre elementos en un contenedor grid o flex utilizando las clases divide-*.
<div class="flex divide-red-500 divide-dotted divide-x-4 border border-gray-400 w-fit">
<div class="size-16 bg-yellow-50"></div>
<div class="size-16 bg-yellow-50"></div>
<div class="size-16 bg-yellow-50"></div>
<div class="size-16 bg-yellow-50"></div>
</div>
Al igual que el borde, se puede gestionar el borde exterior o outline con clases prefijadas con outline-*.
<div class="flex gap-4">
<div class="size-16 border-2 border-gray-400 rounded outline-2 outline-red-500 outline-dashed outline-offset-2"></div>
<div class="size-16 border-2 border-gray-400 rounded-full outline-4 outline-blue-500 outline-dotted outline-offset-2"></div>
</div>