Tailwind CSS: How to use calc() function

Updated: June 1, 2022 By: Pennywise Post a comment

The calc() function performs a calculation and dynamically produces the property value (usually related to width, height, margin, and padding). In Tailwind CSS, you can use the calc() function by putting it between a pair of square brackets [], like this:

<div class="w-[calc(100%-30rem)]"></div>

Let’s see the concrete example below for more clarity.

Example Preview

his example creates a simple layout with 3 columns, where the left column (left menu) has a fixed width of w-48 (12rem or 192px). The middle column (main content) has a width of 2/3 of the remaining space, and the right column (right sidebar) has a width of 1/3 of the remaining space:

The Code

<body class="w-screen flex">
    <aside class="w-48 h-screen bg-green-300 flex justify-center items-center">
        <h1 class="text-xl"> Left Menu</h1>

    <main class="w-[calc((100%-12rem)*2/3)] bg-amber-300 flex justify-center items-center">
        <h1 class="text-xl"> Main Content</h1>

    <aside class="w-[calc((100%-12rem)*1/3)] h-screen bg-pink-300 flex justify-center items-center">
        <h1 class="text-xl"> Right Sidebar</h1>

Futher reading:

You can also check out our CSS category page for the latest tutorials and examples.

Notify of
Inline Feedbacks
View all comments

Related Articles