How to use calc() in Tailwind CSS? Last Updated : 11 Jan, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report The calc() function in CSS allows you to perform calculations for property values dynamically. While Tailwind CSS doesn’t directly support calc(), you can use it inline or with custom utilities.1. Using Inline StylesYou can use calc() directly within the style attribute for dynamic property values. HTML <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="h-screen flex items-center justify-center bg-gray-200"> <div style="width: calc(100% - 50px);" class="bg-blue-500 text-white p-5"> Width is 100% minus 50px </div> </body> </html> In this Example:Inline style is used to apply the calc() function to set a dynamic width.Tailwind classes like bg-blue-500 and p-5 are combined with the inline style.2. Using Arbitrary ValuesTailwind CSS supports arbitrary values using square brackets, allowing you to integrate calc() directly into your classes. HTML <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="h-screen flex items-center justify-center bg-gray-200"> <div class="w-[calc(100%-50px)] bg-green-500 text-white p-5"> Width is 100% minus 50px </div> </body> </html> The w-[calc(100%-50px)] utility sets the width using the calc() function within Tailwind's arbitrary value syntax.This method avoids inline styles, keeping the code clean and consistent with Tailwind's utility-first approach. Comment More infoAdvertise with us Next Article How to use calc() in Tailwind CSS? C coder123456778 Follow Improve Article Tags : Web Technologies CSS Tailwind CSS Tailwind CSS-Questions Similar Reads How to use @apply directive in Tailwind-CSS ? Tailwind CSS is a popular utility-first CSS framework. It is a set of pre-defined CSS classes that can be used to quickly and easily style your HTML elements without having to write custom CSS code. The classes are organized into a set of utility classes that can be used to control the layout, spaci 3 min read How to use Diagonal Fractions in Tailwind CSS ? Tailwind CSS diagonal-fractions utility allows you to display numbers separated by a slash as common diagonal fractions. This activates those sets of figures where the numerator and denominator appear small and are separated by a slash. Syntax:<element class="diagonal-fractions"> Content </ 2 min read How to Add Tailwind CSS to HTML ? Tailwind CSS is a utility-first framework offering pre-defined classes for rapid styling of HTML elements. It simplifies customization and accelerates web development workflows.Integration Options:CDN Integration: Quickly add Tailwind CSS via a CDN link in the <head> of your HTML.Using npm: In 3 min read How to Add New Colors in Tailwind CSS ? Tailwind CSS is a popular utility-first CSS framework that offers a wide range of pre-designed styles and classes to simplify the process of styling web applications. However, the default set of colors provided by Tailwind may not always meet the requirements of your project. In such cases, you may 4 min read How to use CSS Animations with Tailwind CSS ? Tailwind CSS classes are used to style elements and apply animations effortlessly. Utilize Tailwind's animation utility classes to add dynamic visual effects. Combine Tailwind CSS with custom CSS animations for versatile and engaging web designs. Table of Content Tailwind CSS Animation Utility Class 3 min read Like