How to add negative values to Tailwind CSS utility plugin

Issue

How to Add Negative Values to Tailwind CSS Utility Plugin

tl;dr

I have a custom Tailwind utility plugin, with number values. I want to be able to add a - to the beginning of the class, to make it a negative value, like the built-in tranlsate classes.

Goal and Issue

Tailwind CSS is simple. For any property that can have a negative value, you just add a - to the beginning of the class.

Ex. <div className='left-16' /> (left: 64px) —> <div className='-left-16' /> (left: -64px)

I was working on a custom utility class plugin for 3D rotation, and I ran into this issue where I can't use negative values. To be specific, rotate-x-6 is recognized, but -rotate-x-6 is not even recognized as a valid class.

Code

plugin(function ({ matchUtilities, theme }) {
  matchUtilities(
    {
      'rotate-x': (value) => ({
        '--tw-rotate-x': value,
        transform: 'translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z)) rotate3d(var(--tw-rotate-x), var(--tw-rotate-y), var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))',
      }),
    },
    { values: theme('rotate') },
  )

  matchUtilities(
    {
      'rotate-y': (value) => ({
        '--tw-rotate-y': value,
        transform:
          'translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z)) rotate3d(var(--tw-rotate-x), var(--tw-rotate-y), var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))',
      }),
    },
    { values: theme('rotate') },
  )

  matchUtilities(
    {
      'rotate-z': (value) => ({
        '--tw-rotate-z': value,
        transform:
          'translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z)) rotate3d(var(--tw-rotate-x), var(--tw-rotate-y), var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))',
      }),
    },
    { values: theme('rotate') },
  )
})

Possible Pitfalls

• It's possible that using the default rotate theme is the issue

• It could be that rotate-x is the defined class, and I need to somehow define -rotate-x, though I've tried creating a separate class like this, but it isn't recognized

Solution

You need to supply supportsNegativeValues: true as part of the object for the second parameter when calling matchUtilities():

tailwind.config = {
  theme: {
    rotate: {
      1: '1',
    },
  },
  plugins: [
    tailwind.plugin(function({
      matchUtilities,
      theme
    }) {
      matchUtilities({
        'rotate-x': (value) => ({
          '--tw-rotate-x': value,
          transform: 'translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z)) rotate3d(var(--tw-rotate-x), var(--tw-rotate-y), var(--tw-rotate-z), 45deg) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))',
        }),
      }, {
        values: theme('rotate'),
        supportsNegativeValues: true,
      })

      matchUtilities({
        'rotate-y': (value) => ({
          '--tw-rotate-y': value,
          transform: 'translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z)) rotate3d(var(--tw-rotate-x), var(--tw-rotate-y), var(--tw-rotate-z), 45deg) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))',
        }),
      }, {
        values: theme('rotate'),
        supportsNegativeValues: true,
      })

      matchUtilities({
        'rotate-z': (value) => ({
          '--tw-rotate-z': value,
          transform: 'translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z)) rotate3d(var(--tw-rotate-x), var(--tw-rotate-y), var(--tw-rotate-z), 45deg) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))',
        }),
      }, {
        values: theme('rotate'),
        supportsNegativeValues: true,
      })
    }),
  ]
};

*, ::before, ::after {
  --tw-rotate-x: 0;
  --tw-rotate-y: 0;
  --tw-rotate-z: 0;
  --tw-translate-z: 0;
}

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="w-10 h-10 bg-red-500 -rotate-x-1"></div>

Answered By - Wongjn