How to use calc() in Tailwind CSS

Before Tailwind introduced the ability to create utility classes on-the-fly, managing CSS properties and values not included in their utilities was always a pain. This is the case with the calc() function, which I often find myself using in my daily work as a frontend developer. Previously, I almost always ended up adding a custom class to my CSS. Now, starting from Tailwind version 3.1.0, I can compose my utility class directly in the HTML without having to fiddle with the configuration file.

In this article, we’ll see how to do this correctly, as well as explore the various options at our disposal.

Using arbitrary values

I can’t stress enough how useful arbitrary values have been to the Tailwind ecosystem. Thanks to this feature, we can use the CSS calc() function within square brackets, making sure to use the appropriate prefix for each property. For example:

• w-[calc(...)] for width
• p-[calc(...)] for padding
• top-[calc(...)] for top positioning
• And more…

This approach works with any property that accepts a numeric value in CSS.

Using arbitrary properties

While using arbitrary values is the recommended approach, there may be situations where we want to use calc() with properties not included in Tailwind’s utilities. In these cases, we can resort to arbitrary properties:

• [block-size:calc(...)]
• [column-width:calc(...)]
• And more…

Syntax for the calc() function in Tailwind

When we use calc() in Tailwind, whether with arbitrary values or arbitrary properties, we need to follow some basic syntax rules:

• Use square brackets [] to tell Tailwind you’re writing raw CSS.
• Replace spaces with underscores _ or remove them entirely.
• Don’t include any semicolons at the end.

Here are some examples:

• w-[calc(100%_-_1rem)]
• p-[calc(3rem_*_2)]
• [block-size:calc(200px_-_5rem)]

These can also be written like this, since spaces aren’t necessary in CSS:

• w-[calc(100%-1rem)]
• p-[calc(3rem*2)]
• [block-size:calc(200px-5rem)]

Units: rem vs. px

Although it’s possible to use both rem and px, it’s advisable to prefer rem. Tailwind bases its spacing system on rem, ensuring that your utilities work correctly even if there are changes in the base font size.

Using CSS variables

The calc() function also supports CSS variables:

• w-[calc(var(--foo)+1rem)]

You can define variables in your CSS file:

:root {
  --foo: 10px;
}

Or directly as a utility class, to be used on the same element or an ancestor element: [--foo:10px].

Using the theme() function

Tailwind’s theme() function allows you to access values from your configuration. This function can also be used in defining a utility class:

• w-[calc(theme(spacing.12)+1rem)]

Defining custom utility classes via config

For recurring use cases, you can define custom utility classes in your configuration file. For example, you might want to define a new font size utility where the text size varies based on the width of your viewport. In this case, you can add the following configuration to your tailwind.config.js file:

tailwind.config = {
  theme: {
    extend: {
      fontSize: {
        'base-fluid': 'calc(1rem + 1vw)',
      },
    },
  },
};

This will give you access to the text-base-fluid class, which you can use to get a font size that varies based on the width of your viewport.

Conclusion

As you’ve seen, there are multiple options for using calc() in Tailwind. The ability to generate utility classes on-the-fly has completely changed the game, and the previous limitations of a CSS framework based on a defined number of utilities have been completely erased. These recent features provide us developers with an even more flexible and versatile tool, allowing us to use the best strategy based on the circumstances. At least for me, going back to the old way it’s unthinkable.