Hey!

rotateX is fairly niche and not used that often in projects. For this reason, I think rotate-x utilities would be better suited for a plugin that you add to your project, instead of baking it in core Tailwind CSS.

Here's an example of how you could do that custom plugin:

https://play.tailwindcss.com/ZLp0DzFOSW?file=config

Hope it helps 🎉

image

Another way would be to disable the core transform plugin and add your own plugin.

So what i did in my project was, first add transform: false to the corePlugins config object.

module.exports = {
 corePlugins: {
 transform: false
 }
}

Then i had a look at the core plugin, which can be found at https://github.com/tailwindlabs/tailwindcss/blob/master/src/plugins/transform.js

Because i am using the jit mode, i only copied the if clause and modified it to my needs

const plugin = require('tailwindcss/plugin');
module.exports = {
 plugins: [
 plugin(function({ addBase, addUtilities, variants }) {
 addBase({
 '*, ::before, ::after': {
 '--tw-translate-x': '0',
 '--tw-translate-y': '0',
 '--tw-rotate': '0',
 '--tw-rotate-y': '0',
 '--tw-skew-x': '0',
 '--tw-skew-y': '0',
 '--tw-scale-x': '1',
 '--tw-scale-y': '1',
 '--tw-transform': [
 'translateX(var(--tw-translate-x))',
 'translateY(var(--tw-translate-y))',
 'rotate(var(--tw-rotate))',
 'rotateY(var(--tw-rotate))',
 'skewX(var(--tw-skew-x))',
 'skewY(var(--tw-skew-y))',
 'scaleX(var(--tw-scale-x))',
 'scaleY(var(--tw-scale-y))'
 ].join(' ')
 }
 });
 addUtilities(
 {
 '.transform': {
 transform: 'var(--tw-transform)'
 },
 '.transform-cpu': {
 '--tw-transform': [
 'translateX(var(--tw-translate-x))',
 'translateY(var(--tw-translate-y))',
 'rotate(var(--tw-rotate))',
 'rotateY(var(--tw-rotate-y))',
 'skewX(var(--tw-skew-x))',
 'skewY(var(--tw-skew-y))',
 'scaleX(var(--tw-scale-x))',
 'scaleY(var(--tw-scale-y))'
 ].join(' ')
 },
 '.transform-gpu': {
 '--tw-transform': [
 'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)',
 'rotate(var(--tw-rotate))',
 'rotateY(var(--tw-rotate-y))',
 'skewX(var(--tw-skew-x))',
 'skewY(var(--tw-skew-y))',
 'scaleX(var(--tw-scale-x))',
 'scaleY(var(--tw-scale-y))'
 ].join(' ')
 },
 '.transform-none': { transform: 'none' }
 },
 variants('transform')
 );
 })
 ]
}

In my case, i added the rotateY property. And to top it all off, i added another plugin which lets you configure the new rotateY property. As default, it uses tailwinds rotate values from the default config.

const plugin = require('tailwindcss/plugin');
const defaultConfig = require('tailwindcss/defaultConfig');
const {
 default: prefixNegativeModifiers
} = require('tailwindcss/lib/util/prefixNegativeModifiers');
const map = require('lodash/map');
module.exports = {
 plugins: [
 plugin(
 function({ addUtilities, theme, e }) {
 const rotateY = map(theme('rotateY'), (value, key) => {
 return {
 [`.${e(prefixNegativeModifiers('rotate-y', key))}`]: {
 '--tw-rotate-y': value
 }
 };
 });
 addUtilities(rotateY);
 },
 {
 theme: {
 rotateY: defaultConfig.theme.rotate
 }
 }
 )
 ]
}

I hope that helps.

For what it's worth - I'd love to see native support baked into tailwind as well to be honest.
Not sure why it's considered to be niche more than other transformations that are built into the framework? :-)

Using just one svg file to implement a diagonal shape divider, using rotate-x would allow me to use the one svg in both directions. Combining it with rotate alltogether allows me to reuse the one component both on top as well as bottom of the div I want to add the divider to :-)

I have to add my support for this being natively supported in Tailwind. I was confused to find that "rotate-x", "rotate-y", and "rotate-z" classes were not already a thing.

perspective + rotateX is becoming more common with UI's. Linear is using it to tilt rectangles backwards in 3d space then animate them forwards towards the user in their new home page redesign.

I think this would be a great addition to tailwind.

I made this recently. It’s early days, but I think it has potential to fill this gap and others around 3D transforms.

https://github.com/sambauers/tailwindcss-3d

A bit lacking in documentation, but should make sense to most folks familiar with Tailwind transforms.

@sambauers Dude, you just saved me. I was honestly pretty shocked Tailwind hasn't added support for these natively. 3D transforms are super pivotal in CSS animations and transitions.

Could you add some usage examples to your repo's README?

Today I tried transform-[rotateY(90deg)] doesn't exist,

Turns out [transform:rotateY(90deg)] works fine, 👍 nice

Tailwind v4 is finally adding support for rotate-x-*, rotate-y-*, and rotate-z-* utilities.

https://tailwindcss.com/docs/v4-beta#rotate