How to use calc() in Tailwind CSS

The CSS calc() function allows us to perform basic math operations for values of properties accepting numbers such as width, height, and more.

In Tailwind CSS 3.0 and newer versions, you can now use the calc method as a utility class in your projects.

Here is an example of using the calc function to calculate a value for the width of a div.

<div class="w-[calc(100%-20px)]">...</div>

Here is another example:

<div class="mt-[calc(16px+50%)]">...</div>

Remember that, you have to omit spaces within calc() expressions (e.g., calc(100%-2rem)) for it to work properly.

Conclusion

The calc() is an important method in CSS and with the coming of TailwindCSS v3, you can now easily use it in your projects.

Thank you for reading.