How to use calc() in Tailwind CSS ?
Last Updated :
25 Jan, 2024
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.
Using Inline style
To use calc() in Tailwind CSS with inline styles, you can use the style attribute and template literals. Tailwind CSS doesn’t directly support calc() it as it’s a utility-first framework, but you can apply inline styles to achieve the desired effect. You can use the
“calc( )” function inside your HTML using tailwind CSS as Inline styles.
Example: This example shows to use calc( ) using inline tailwind within the HTML document.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To use calc( ) using inline style approach</title>
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
</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()”.
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.
- 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: [],
};
Example: This example illustrates the usage of the calc() in tailwind CSS by implementing the above-approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>To use calc( ) using class approach</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="w-screen h-screen flex items-center justify-center">
<div class="w-56 h-46 bg-emerald-600">
GeeksForGeeks
</div>
</div>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...