Adding Negative Values to Tailwind CSS Utility Plugin
Quick Summary:
I've developed a custom Tailwind utility plugin that includes numeric values. I'm looking for a way to introduce negative numbers by adding a - at the start of the class, similar to the existing translate classes.
Aim and Challenge
Tailwind CSS operates on a straightforward principle. When dealing with properties that accept negative values, you can simply prepend a - to the class.
For instance:
<div className='left-16' />left: 64px) —> <div className='-left-16' />left: -64px)
While developing a custom utility plugin for 3D rotation, I encountered an obstacle where negative values weren't recognized. Specifically, the class rotate-x-6 works, but -rotate-x-6 isn't accepted as a valid class.
The Code Snippet
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') },
)
})
Potential Challenges
• The issue might stem from using the default rotate theme
• It's possible that only rotate-x is defined as a class, requiring a method to define -rotate-x. However, attempts to create a separate class haven't yielded recognition