How to use arbitrary values in Tailwind CSS?

3 min readAug 5, 2023

Tailwind CSS is a powerful and simple utility-first CSS framework for building rapid custom user interfaces. I’m using it in almost every web project.

It has been around for a while now and I’m pretty sure every web developer has heard about it already, or might have used it in their projects.

The challenging part of a framework is when you want to apply some sort of customizations and when you want to do something that the framework doesn’t handle for you. It can quickly become a pain as many frameworks don’t let you do that, but that’s not the case with Tailwind CSS.

There are 4 different ways that you can apply custom styles in Tailwind CSS:

Customizing your theme
Using arbitrary values
Using CSS and the @alyer directive
Writing plugins

In this article, we will only focus on applying custom styles using Arbitrary values.

Let’s learn together.

NOTE:

I assume you have already created a project and you have installed Tailwind CSS. If you didn’t, no issue, just open your terminal and follow the steps here in the Tailwind CSS docs to create a frontend project with Vite and then install Tailwind CSS.

1. Tailwind CSS Arbitray Values

As of Tailwind CSS v3.0 and above, we can use arbitrary values in our Tailwind CSS classes using the square bracket notation to apply custom styles on the fly.

Example:

<div class="h-[4rem] w-[6rem]">
    <!-- .... -->
</div>

The values in the square bracket are arbitrary values, and you can pass any value that you want.

It works well with all units like px, rem, and em:

<div class="rounded-[5px] py-[4px] px-[0.8rem]">
    <!-- .... -->
</div>

The arbitrary value works with everything in the Tailwind CSS framework, like colors, sizing, custom variables, and more.

<div class="h-[1rem] w-[4rem] bg-[#0f355b] font-[.custom-font] text-[#e0e3e6]">
    <!-- .... -->
</div>

If you have some custom design in your 'tailwind.config.js' file, you can reference them using the theme function:

<div class="grid grid-cols-[fit-content(theme(spacing.32))]">
    <!-- .... -->
</div>

2. Arbitray Properties

You can write completely arbitrary CSS styles using the square bracket notation:

<div class="[mask-type: unset] hover:[mask-type: inherit]">
    <!-- .... -->
</div>

3. Arbitray Variants

You can directly apply the Tailwind CSS pseudo-class variants or responsive variants in your HTML but using the square bracket notation:

<ul class="[list-style: none]" role="list">
    {#each items as item}
    <li class="[sm:last-child]:border-none">{item}</li>
    {/each}
</ul>

3. Apply Styles Using Calc()

You can use the CSS calc() function within the Tailwind CSS square bracket notation to apply custom styles:

<div class="h-[calc(100vh-10px)]">
    <!-- ... -->
</div>

Or you can call the styles in your 'tailwind.config.js' file directly using the calc() function:

<div class="sm:hidden">
    <input class="px-[1rem] py-[calc(theme(spacing.2)-1px)]" />
</div>

Note: When working with the 'calc()' or the 'theme()' inside the 'calc()', remember that Tailwind CSS does not support empty spaces. But, if you do want the empty spaces in your calc() function for readability, you can use 'underscores (_)' instead of empty spaces:

<div class="h-[calc(100vh_-_10px)]">
    <!-- ... -->
</div>

Conclusion

Arbitrary values in Tailwind CSS are the easiest and most powerful way to apply custom styles to your project. To get things pixel-perfect, use the square bracket notation from Tailwind CSS to achieve the result you want to get.

If you found this article helpful, consider sharing it with your circle so others can benefit from it too. It means a lot to me 🙏