TailwindCSS Tip: Arbitrary Values in Utility Classes

I’m currently redesigning this blog (coming soon) and I’ve been using TailwindCSS to handle most of the
heavy lifting. I know TailwindCSS isn’t for everyone, but I think it’s a great tool. Being able to
use the utility classes to quickly design the new version of the site, has been a ton of fun. Something I would rarely say about using just CSS.

While I’ve talked about TailwindCSS quite a lot on the blog (and in my recently released Pluralsight Course), one thing that I didn’t realize worked was “one-off values” in TailwindCSS.

Let me show you what I mean:

<div class="md:h-screen 
          bg-gray-900 
          text-gray-200 
          md:sticky 
          md:top-0" 
          id="sidebar">
  <aside class="p-2 
                md:flex 
                md:flex-col 
                md:h-full">
    <div class="md:flex-grow hidden md:block"></div>
    <div>
      <a href="/"
        ><img
          src="/img/headshots/shawn-head-sm.jpg"
          data-src="/img/headshots/shawn-head.gif"
          class="lazy 
                 rounded-full 
                 border-2 
                 border-transparent 
                 shadow-md 
                 shadow-gray-700 
                 hover:border-gray-500 
                 hidden md:block 
                 w-40 
                 mx-auto"
          alt="Headshot"
      /></a>

On my new site, the sidebar is a named object on the page. What I wanted to do was set it’s width to a specific size. I could that by using one of the built-in values:

<div class="md:h-screen 
          bg-gray-900 
          text-gray-200 
          md:sticky 
          md:top-0
          w-56" 
          id="sidebar">

The w-56 would simply set the width to 14rem for me (56 / 4 = 14, by default each value in the numbering system equates to a 1/4 of a rem). But that size wasn’t exactly right I need it to be exactly 14.5rem. And the default TailwindCSS classes do not have a value for that. One approach is to simply add a value in the CSS for this:

  #sidebar {
    width: 14.5rem;
  }

But that leads to a lot of manually maintainance. I could define this specifically by extending the TailwindCSS configuration:

module.exports = {
  content: [
    "content/**/*.{md,html}"],
  theme: {
    extend: {
      width: {
        "54": "14rem"
      },

But extending the entire theme for a single, one-off size seems excessive (and likely harder to manage since if I don’t need it later, it won’t disappear by itself). This trick is actually to support specific values with TailwindCSS’s utility classes. The fix is to just add the size (and TailwindCSS will create a utility class for it):

<div class="md:h-screen 
          bg-gray-900 
          text-gray-200 
          md:sticky 
          md:top-0
          w-[14.5rem]" 
          id="sidebar">

That w-[14.5rem] is telling the TailwindCSS compiler to create a class with that specific name but with that specific value. This is the output:

.w-\[14\.5rem\]{
  width: 14.5rem;
}

This relates to this one-off value. You can do it for almost any utility class that is using the spacing system. For example:

<div class="w-[200px] 
            h-[30rem]
            pl-[1px]
            mt-[10px]
            tracking-[.001rem]">
</div>

This extends to other types of properties as well that might benefit from arbitrary values:

<div class="bg-[url(img/somebackground.png)] 
            before:content-['add']
            text-[#FFEEDD]">
</div>

You can see how this is helpful to avoid CSS or inline-style workarounds. One thing to note is that the utility class name must not contain spaces, but you can use underscore (_) to replace a space:

<div class="before:content-['add_more']">
</div>

This will set the before content to add more, but if you really need an underscore, you can escape it:

<div class="before:content-['add\_more']">
</div>

This will set the before content to add_more.

The arbitrary values really help you when you don’t need a whole class or CSS rule but a one-off value. I hope this has been useful!

You can watch my full TailwindCSS course on Pluralsight here: TailwindCSS 3 Fundamentals