The calc() is a built-in function in CSS that enables you to carry out mathematical computations. You can use the calc() function in Tailwind CSS to dynamically determine values for different CSS properties. You can use the “calc()” statement just by wrapping it inside square brackets. In this article, we will see the usage of the calc() function in Tailwind CSS.
Syntax:
calc(expression)
Parameter: The ‘expression” can include mathematical operations, values, and units.
There are two types of approaches to using “calc()” in Tailwind CSS, which are described below:
Approache 1: Inline approach
You can use the “calc()” function inside your HTML using tailwind CSS as Inline styles.
Example: In this example, we will use an inline tailwind inside the HTML.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<script src=
</script>
</head>
<body>
<div class="w-screen h-screen">
<div class="w-[calc(56%-120px)] h-[calc(46%-100px)]
bg-emerald-600">
GeeksForGeeks
</div>
</div>
</body>
</html>
|
Output: In the above example, we are setting the width of the child container to be 56% of its parent container minus 120px and the height of the child container to be 46% of its parent container minus 100px using “calc()”.
-300.png)
Approach 2: Utility class approach
You can create your custom utility classes that leverage the “calc()” function and use them in your HTML. Let’s see the steps of using “calc()” as a custom utility class.
Steps to be followed:
- Open your Tailwind CSS configuration file (i.e. tailwind.config.js). Inside this file, there is a “theme” object, and inside the theme find the “extend” property. If it doesn’t exist, create it.
- Inside the “extend” you can customize Tailwind CSS utilities. Within, create the “margin” property.
- Inside, the margin creates a new property called “calc()”. This will be the name of our custom utility class. Then set the value of your margin according to you as shown below. Inside the “tailwind.config.js.
tailwind.config.js:
module.exports = {
theme: {
extend: {
margin: {
calc: 'calc(4rem + 4px)',
},
},
},
variants: {},
plugins: [],
};
- Now you can use the above calc property inside your HTML. Let’s suppose we want to give margin-left to my container by “4rem + 4px”.You can use the “.ml-calc” class to give the left margin to our container.
Example: This example illustrates the usage of the calc() in tailwind CSS by implementing the above-approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href="/dist/output.css"
rel="stylesheet">
</head>
<body>
<div class="ml-calc w-32 h-12 bg-emerald-600">
GeeksForGeeks
</div>
</body>
</html>
|
Output: In the above example, we are using calc as a utility class by defining it in the “tailwind.config.js” file. In this, we are giving the margin-left of “4rem + 4px” to the container.
-300.png)
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
21 Jun, 2023
Like Article
Save Article