Jeff Jewiss

I first saw this used in a project when a coworker used this technique in a pull request and I had to lookup the syntax. Before arbitrary values were added to Tailwind I would take one of two approaches to bring custom values into a project.

In this example let's say we wanted to add a custom margin top and wanted to use it with a responsive design with media queries.

The first would be to extend the Tailwind config:

{
  extend: {
    spacing: {
      18: '4.5rem',
    }
  }
}

The second option would be to add CSS to the app.css file or two a file imported into the app.css file:

.mt-18 {
  margin-top: 4.5rem;
}

...

With arbitrary values we can use the square bracket syntax to apply a value with any unit to one of the existing Tailwind classes:

<div class="mt-[4.5rem] lg:mt-[344px]">
  <!-- ... -->
</div>

For more information on arbitrary values with Tailwind you can read the docs page on adding custom values.