diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index 40a795aec..3e29dec55 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -1313,6 +1313,7 @@ exports[`getClassList 1`] = `
   "rotate-45",
   "rotate-6",
   "rotate-90",
+  "rotate-none",
   "rotate-x-0",
   "rotate-x-1",
   "rotate-x-12",
@@ -1420,6 +1421,7 @@ exports[`getClassList 1`] = `
   "scale-75",
   "scale-90",
   "scale-95",
+  "scale-none",
   "scale-x-0",
   "scale-x-100",
   "scale-x-105",
@@ -1708,6 +1710,7 @@ exports[`getClassList 1`] = `
   "translate-3d",
   "translate-4",
   "translate-full",
+  "translate-none",
   "translate-x-0.5",
   "translate-x-1",
   "translate-x-3",
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 0dcbadb46..5f28b5d78 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -2711,33 +2711,33 @@ test('rotate-y', () => {
 test('skew', () => {
   expect(run(['skew-6', '-skew-6', 'skew-[123deg]'])).toMatchInlineSnapshot(`
     ".-skew-6 {
-      --tw-skew-x: calc(6deg * -1);
-      --tw-skew-y: calc(6deg * -1);
-      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
+      --tw-skew-x: skewX(calc(6deg * -1));
+      --tw-skew-y: skewY(calc(6deg * -1));
+      transform: var(--tw-skew-x) var(--tw-skew-y);
     }
 
     .skew-6 {
-      --tw-skew-x: 6deg;
-      --tw-skew-y: 6deg;
-      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
+      --tw-skew-x: skewX(6deg);
+      --tw-skew-y: skewY(6deg);
+      transform: var(--tw-skew-x) var(--tw-skew-y);
     }
 
     .skew-\\[123deg\\] {
-      --tw-skew-x: 123deg;
-      --tw-skew-y: 123deg;
-      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
+      --tw-skew-x: skewX(123deg);
+      --tw-skew-y: skewY(123deg);
+      transform: var(--tw-skew-x) var(--tw-skew-y);
     }
 
     @property --tw-skew-x {
-      syntax: "<angle>";
+      syntax: "<transform-function>";
       inherits: false;
-      initial-value: 0deg;
+      initial-value: skewX(0);
     }
 
     @property --tw-skew-y {
-      syntax: "<angle>";
+      syntax: "<transform-function>";
       inherits: false;
-      initial-value: 0deg;
+      initial-value: skewY(0);
     }"
   `)
   expect(run(['skew', 'skew-unknown'])).toEqual('')
@@ -2746,30 +2746,30 @@ test('skew', () => {
 test('skew-x', () => {
   expect(run(['skew-x-6', '-skew-x-6', 'skew-x-[123deg]'])).toMatchInlineSnapshot(`
     ".-skew-x-6 {
-      --tw-skew-x: calc(6deg * -1);
-      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
+      --tw-skew-x: skewX(calc(6deg * -1));
+      transform: var(--tw-skew-x) var(--tw-skew-y);
     }
 
     .skew-x-6 {
-      --tw-skew-x: 6deg;
-      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
+      --tw-skew-x: skewX(6deg);
+      transform: var(--tw-skew-x) var(--tw-skew-y);
     }
 
     .skew-x-\\[123deg\\] {
-      --tw-skew-x: 123deg;
-      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
+      --tw-skew-x: skewX(123deg);
+      transform: var(--tw-skew-x) var(--tw-skew-y);
     }
 
     @property --tw-skew-x {
-      syntax: "<angle>";
+      syntax: "<transform-function>";
       inherits: false;
-      initial-value: 0deg;
+      initial-value: skewX(0);
     }
 
     @property --tw-skew-y {
-      syntax: "<angle>";
+      syntax: "<transform-function>";
       inherits: false;
-      initial-value: 0deg;
+      initial-value: skewY(0);
     }"
   `)
   expect(run(['skew-x', 'skew-x-unknown'])).toEqual('')
@@ -2778,30 +2778,30 @@ test('skew-x', () => {
 test('skew-y', () => {
   expect(run(['skew-y-6', '-skew-y-6', 'skew-y-[123deg]'])).toMatchInlineSnapshot(`
     ".-skew-y-6 {
-      --tw-skew-y: calc(6deg * -1);
-      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
+      --tw-skew-y: skewY(calc(6deg * -1));
+      transform: var(--tw-skew-x) var(--tw-skew-y);
     }
 
     .skew-y-6 {
-      --tw-skew-y: 6deg;
-      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
+      --tw-skew-y: skewY(6deg);
+      transform: var(--tw-skew-x) var(--tw-skew-y);
     }
 
     .skew-y-\\[123deg\\] {
-      --tw-skew-y: 123deg;
-      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
+      --tw-skew-y: skewY(123deg);
+      transform: var(--tw-skew-x) var(--tw-skew-y);
     }
 
     @property --tw-skew-x {
-      syntax: "<angle>";
+      syntax: "<transform-function>";
       inherits: false;
-      initial-value: 0deg;
+      initial-value: skewX(0);
     }
 
     @property --tw-skew-y {
-      syntax: "<angle>";
+      syntax: "<transform-function>";
       inherits: false;
-      initial-value: 0deg;
+      initial-value: skewY(0);
     }"
   `)
   expect(run(['skew-y', 'skew-y-unknown'])).toEqual('')
@@ -3034,36 +3034,36 @@ test('transform', () => {
       'transform-[scaleZ(2)_rotateY(45deg)]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".transform-none {
-      transform: none;
-    }
-
-    .transform {
-      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
+    ".transform {
+      transform: var(--tw-skew-x) var(--tw-skew-y);
     }
 
     .transform-\\[scaleZ\\(2\\)_rotateY\\(45deg\\)\\] {
-      transform: scaleZ(2) rotateY(45deg) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
+      transform: scaleZ(2)rotateY(45deg);
     }
 
     .transform-cpu {
-      transform: translate(0);
+      transform: var(--tw-skew-x) var(--tw-skew-y);
     }
 
     .transform-gpu {
-      transform: translate(0, 0, 0);
+      transform: translateZ(0) var(--tw-skew-x) var(--tw-skew-y);
+    }
+
+    .transform-none {
+      transform: none;
     }
 
     @property --tw-skew-x {
-      syntax: "<angle>";
+      syntax: "<transform-function>";
       inherits: false;
-      initial-value: 0deg;
+      initial-value: skewX(0);
     }
 
     @property --tw-skew-y {
-      syntax: "<angle>";
+      syntax: "<transform-function>";
       inherits: false;
-      initial-value: 0deg;
+      initial-value: skewY(0);
     }"
   `)
   expect(
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 1fa91b1fe..d710481f5 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -1213,6 +1213,7 @@ export function createUtilities(theme: Theme) {
   /**
    * @css `translate`
    */
+  staticUtility('translate-none', [['translate', 'none']])
   utilities.static('translate-full', (candidate) => {
     let value = candidate.negative ? '-100%' : '100%'
 
@@ -1280,6 +1281,7 @@ export function createUtilities(theme: Theme) {
    * `rotate-[x_45deg]` => `rotate: x 45deg`
    * `rotate-[1_2_3_45deg]` => `rotate: 1 2 3 45deg`
    */
+  staticUtility('rotate-none', [['rotate', 'none']])
   utilities.functional('rotate', (candidate) => {
     if (!candidate.value) return
     let value
@@ -1331,7 +1333,10 @@ export function createUtilities(theme: Theme) {
   }
 
   let skewProperties = () =>
-    atRoot([property('--tw-skew-x', '0deg', '<angle>'), property('--tw-skew-y', '0deg', '<angle>')])
+    atRoot([
+      property('--tw-skew-x', 'skewX(0)', '<transform-function>'),
+      property('--tw-skew-y', 'skewY(0)', '<transform-function>'),
+    ])
 
   /**
    * @css `transform`
@@ -1346,9 +1351,9 @@ export function createUtilities(theme: Theme) {
     },
     handle: (value) => [
       skewProperties(),
-      decl('--tw-skew-x', value),
-      decl('--tw-skew-y', value),
-      decl('transform', 'skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))'),
+      decl('--tw-skew-x', `skewX(${value})`),
+      decl('--tw-skew-y', `skewY(${value})`),
+      decl('transform', 'var(--tw-skew-x) var(--tw-skew-y)'),
     ],
   })
 
@@ -1365,8 +1370,8 @@ export function createUtilities(theme: Theme) {
     },
     handle: (value) => [
       skewProperties(),
-      decl('--tw-skew-x', value),
-      decl('transform', 'skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))'),
+      decl('--tw-skew-x', `skewX(${value})`),
+      decl('transform', 'var(--tw-skew-x) var(--tw-skew-y)'),
     ],
   })
 
@@ -1383,8 +1388,8 @@ export function createUtilities(theme: Theme) {
     },
     handle: (value) => [
       skewProperties(),
-      decl('--tw-skew-y', value),
-      decl('transform', 'skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))'),
+      decl('--tw-skew-y', `skewY(${value})`),
+      decl('transform', 'var(--tw-skew-x) var(--tw-skew-y)'),
     ],
   })
 
@@ -1422,6 +1427,7 @@ export function createUtilities(theme: Theme) {
   /**
    * @css `scale`
    */
+  staticUtility('scale-none', [['scale', 'none']])
   utilities.functional('scale', (candidate) => {
     if (!candidate.value) return
     let value
@@ -1506,20 +1512,15 @@ export function createUtilities(theme: Theme) {
   utilities.functional('transform', (candidate) => {
     if (candidate.negative) return
 
-    let value = 'skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))'
+    let value: string | null = null
     if (!candidate.value) {
-      // Supported as a legacy value for its stacking context
+      value = 'var(--tw-skew-x) var(--tw-skew-y)'
     } else if (candidate.value.kind === 'arbitrary') {
-      // Since skew-x and skew-y are implemented using `transform`, we preserve
-      // them even if an arbitrary transform is provided. Transform functions
-      // are applied right to left, so we put them at the end so they are
-      // applied before other transforms, similar to other specific transform
-      // properties.
-      //
-      // https://developer.mozilla.org/en-US/docs/Web/CSS/transform#values
-      value = `${candidate.value.value} ${value}`
+      value = candidate.value.value
     }
 
+    if (value === null) return
+
     return [skewProperties(), decl('transform', value)]
   })
   suggest('transform', () => [
@@ -1528,14 +1529,9 @@ export function createUtilities(theme: Theme) {
     },
   ])
 
-  staticUtility('transform-cpu', [['transform', 'translate(0,0)']])
-  staticUtility('transform-gpu', [['transform', 'translate(0,0,0)']])
-  staticUtility('transform-none', [
-    ['translate', 'none'],
-    ['rotate', 'none'],
-    ['scale', 'none'],
-    ['transform', 'none'],
-  ])
+  staticUtility('transform-cpu', [['transform', 'var(--tw-skew-x) var(--tw-skew-y)']])
+  staticUtility('transform-gpu', [['transform', 'translateZ(0) var(--tw-skew-x) var(--tw-skew-y)']])
+  staticUtility('transform-none', [['transform', 'none']])
 
   /**
    * @css `transform-style`