tengo este html:
<div class="container h-screen w-screen"> <div class="navBar h-7"></div> <div class="content-container"></div> </div>Establecí la altura de .navBar en h-7. Ahora quiero establecer la altura de .content-container en 100vh-(h-7).
¿Cómo puedo usar calc() para configurarlo?
Utilice la función theme() para acceder a los valores de configuración de Tailwind mediante la notación de puntos.
Esta puede ser una alternativa útil a @apply cuando desea hacer referencia a un valor de la configuración de su tema solo para una parte de una declaración:
.content-container { height: calc(100vh - theme('spacing.7')); }Si está utilizando v2.x, agregue mode: 'jit' a su tailwind.config.js (no se necesita mode: 'jit' en tailwind v3)
module.exports = { mode: 'jit', .... };Y usa así: ( ¡Sin espacio! )
class="w-[calc(100%+2rem)]"Producirá:
.w-\[calc\(100\%\+2rem\)\] { width: calc(100% + 2rem); }También podemos usar las variables del tema:
h-[calc(100%-theme(space.24))] Ahora podemos usar un guión bajo _ en lugar de espacios en blanco:
Ref: Manejo de espacios en blanco
<script src="https://cdn.tailwindcss.com"></script> <div class="h-20 w-[calc(100%_-_10rem)] bg-yellow-200"></div>