How to use calc() in tailwind css?

@jerad 

To use calc() in Tailwind CSS, you can simply write the calc() function directly in your utility classes.

For example, if you want to set the width of an element to be 50% of the viewport width minus 20px, you can write:

1

<div class="w-calc(50vw - 20px)"></div>

This will calculate the width of the element to be 50% of the viewport width minus 20px.

You can also use calc() in combination with other utility classes. For example, if you want to set the padding of an element to be 10px on all sides plus 5% of the viewport width, you can write:

1

<div class="p-10 calc(5vw)"></div>

This will set the padding of the element to be 10px on all sides plus 5% of the viewport width.

Overall, you can use calc() in Tailwind CSS wherever you would normally use a length value. Just make sure to include the calc() function in your utility classes where you want to perform calculations.