Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Use calc() in Tailwind CSS
Many developers find it difficult to use the calc() function in Tailwind CSS, which limits their ability to create responsive and dynamic layouts. This article explains how to implement calc() effectively, improving design flexibility and precision.
What is calc() in CSS?
The CSS Calc() function allows you to perform calculations to determine CSS property values and perform arithmetic operations (addition, subtraction, multiplication, and division) directly within your CSS.
Approaches For Calc() With Tailwind CSS
Tailwind doesn't have built-in utilities for calc(), but you can still use it in different ways.
Using Inline Styles
As Tailwind CSS does not have any predefined utility classes for using the calc() function in it. The simplest way to use calc() in your Tailwind project is to directly apply calc() via the style attribute in HTML.
Syntax
<div style="width: calc(100% - 200px); height: calc(100% - 200px);">
---
</div>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using calc() in Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center h-screen
bg-gray-200">
<div class="bg-blue-500 text-center"
style="width: calc(100% - 200px);
height: calc(100% - 200px);">
Content Area
</div>
</body>
</html>
Output:
Custom Classes In A CSS File
You can create reusable styles in a separate CSS file or style tag using calc() in your custom classes. This way, you can easily apply calculations for sizes and spacing across multiple elements without repeating code.
Syntax
/*CSS Declaration*/
.custom-box {
width: calc(100% - 40px); /* Full width minus 40 pixels */
height: 200px; /* Fixed height */
}
/*HTML Code*/
<div class="custom-box">
---
</div>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tailwind CSS with calc()</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.custom-box {
width: calc(100% - 40px); /* Full width minus 40 pixels */
height: 200px; /* Fixed height */
}
</style>
</head>
<body class="bg-gray-100 flex items-center
justify-center h-screen">
<div class="custom-box bg-blue-500 shadow-md"></div>
</body>
</html>
Output:
Extending tailwind.config.js
You can make Tailwind CSS even more flexible by using calc() with CSS variables in the "tailwind.config.js" file. This allows you to create custom properties that can be easily reused in your styles, making it simpler to manage and update your designs. You can follow the following steps to do the same:
- Step 1 Set Up Tailwind CSS: Make sure you have Tailwind CSS installed in your project. If you haven't done this, follow the Tailwind CSS installation guide.
- Step 2 Define Custom Properties: In the 'theme' section of tailwind.config.js, you can add your own properties (CSS variables) and use the calc() function. For example:
module.exports = {
theme: {
extend: {
spacing: {
'custom-width': 'calc(100% - 100px)', // Use calc() for a custom width
},
colors: {
'custom-color': 'var(--my-custom-color)', // Define a custom color using a CSS variable
},
},
},
plugins: [],
}
:root {
--my-custom-color: #3490dc; /* Set a custom color value */
}
Syntax
<div class="bg-custom-color w-custom-width">
---
</div>
Example
<!DOCTYPE html>
<html>
<head>
<title>Tailwind CSS with calc()</title>
<link href="./output.css" rel="stylesheet">
<style>
:root {
--my-custom-color: #3490dc; /* Set a custom color value */
}
</style>
</head>
<body class="bg-gray-300 flex items-center
justify-center h-screen">
<div class="h-32 bg-custom-color
w-custom-width text-center">
This box uses custom properties with calc()!
</div>
</body>
</html>
Output:
161 Views
