3D transform utilities

packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

@@ -393,6 +393,11 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --line-height-8: 2rem;
     --line-height-9: 2.25rem;
     --line-height-10: 2.5rem;
+    --perspective-dramatic: 100px;
+    --perspective-near: 300px;
+    --perspective-normal: 500px;
+    --perspective-midrange: 800px;
+    --perspective-distant: 1200px;
     --transition-timing-function-linear: linear;
     --transition-timing-function-in: cubic-bezier(.4, 0, 1, 1);
     --transition-timing-function-out: cubic-bezier(0, 0, .2, 1);

packages/tailwindcss/src/__snapshots__/index.test.ts.snap

@@ -392,6 +392,11 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --line-height-8: 2rem;
   --line-height-9: 2.25rem;
   --line-height-10: 2.5rem;
+  --perspective-dramatic: 100px;
+  --perspective-near: 300px;
+  --perspective-normal: 500px;
+  --perspective-midrange: 800px;
+  --perspective-distant: 1200px;
   --transition-timing-function-linear: linear;
   --transition-timing-function-in: cubic-bezier(.4, 0, 1, 1);
   --transition-timing-function-out: cubic-bezier(0, 0, .2, 1);

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -91,6 +91,24 @@ exports[`getClassList 1`] = `
   "-rotate-45",
   "-rotate-6",
   "-rotate-90",
+  "-rotate-x-0",
+  "-rotate-x-1",
+  "-rotate-x-12",
+  "-rotate-x-180",
+  "-rotate-x-2",
+  "-rotate-x-3",
+  "-rotate-x-45",
+  "-rotate-x-6",
+  "-rotate-x-90",
+  "-rotate-y-0",
+  "-rotate-y-1",
+  "-rotate-y-12",
+  "-rotate-y-180",
+  "-rotate-y-2",
+  "-rotate-y-3",
+  "-rotate-y-45",
+  "-rotate-y-6",
+  "-rotate-y-90",
   "-scale-0",
   "-scale-100",
   "-scale-105",
@@ -124,6 +142,17 @@ exports[`getClassList 1`] = `
   "-scale-y-75",
   "-scale-y-90",
   "-scale-y-95",
+  "-scale-z-0",
+  "-scale-z-100",
+  "-scale-z-105",
+  "-scale-z-110",
+  "-scale-z-125",
+  "-scale-z-150",
+  "-scale-z-200",
+  "-scale-z-50",
+  "-scale-z-75",
+  "-scale-z-90",
+  "-scale-z-95",
   "-scroll-m-0.5",
   "-scroll-m-1",
   "-scroll-m-3",
@@ -242,6 +271,10 @@ exports[`getClassList 1`] = `
   "-translate-y-1",
   "-translate-y-3",
   "-translate-y-4",
+  "-translate-z-0.5",
+  "-translate-z-1",
+  "-translate-z-3",
+  "-translate-z-4",
   "-underline-offset-0",
   "-underline-offset-1",
   "-underline-offset-2",
@@ -346,6 +379,8 @@ exports[`getClassList 1`] = `
   "backdrop-sepia-0",
   "backdrop-sepia-100",
   "backdrop-sepia-50",
+  "backface-hidden",
+  "backface-visible",
   "basis-0.5",
   "basis-1",
   "basis-3",
@@ -1161,6 +1196,18 @@ exports[`getClassList 1`] = `
   "pe-1",
   "pe-3",
   "pe-4",
+  "perspective-dramatic",
+  "perspective-none",
+  "perspective-normal",
+  "perspective-origin-bottom",
+  "perspective-origin-bottom-left",
+  "perspective-origin-bottom-right",
+  "perspective-origin-center",
+  "perspective-origin-left",
+  "perspective-origin-right",
+  "perspective-origin-top",
+  "perspective-origin-top-left",
+  "perspective-origin-top-right",
   "pl-0.5",
   "pl-1",
   "pl-3",
@@ -1244,6 +1291,24 @@ exports[`getClassList 1`] = `
   "rotate-45",
   "rotate-6",
   "rotate-90",
+  "rotate-x-0",
+  "rotate-x-1",
+  "rotate-x-12",
+  "rotate-x-180",
+  "rotate-x-2",
+  "rotate-x-3",
+  "rotate-x-45",
+  "rotate-x-6",
+  "rotate-x-90",
+  "rotate-y-0",
+  "rotate-y-1",
+  "rotate-y-12",
+  "rotate-y-180",
+  "rotate-y-2",
+  "rotate-y-3",
+  "rotate-y-45",
+  "rotate-y-6",
+  "rotate-y-90",
   "rounded-b-full",
   "rounded-b-none",
   "rounded-bl-full",
@@ -1328,6 +1393,7 @@ exports[`getClassList 1`] = `
   "scale-125",
   "scale-150",
   "scale-200",
+  "scale-3d",
   "scale-50",
   "scale-75",
   "scale-90",
@@ -1354,6 +1420,17 @@ exports[`getClassList 1`] = `
   "scale-y-75",
   "scale-y-90",
   "scale-y-95",
+  "scale-z-0",
+  "scale-z-100",
+  "scale-z-105",
+  "scale-z-110",
+  "scale-z-125",
+  "scale-z-150",
+  "scale-z-200",
+  "scale-z-50",
+  "scale-z-75",
+  "scale-z-90",
+  "scale-z-95",
   "scroll-auto",
   "scroll-m-0.5",
   "scroll-m-1",
@@ -1582,9 +1659,16 @@ exports[`getClassList 1`] = `
   "touch-pan-y",
   "touch-pinch-zoom",
   "transform",
+  "transform-3d",
+  "transform-border",
+  "transform-content",
   "transform-cpu",
+  "transform-fill",
+  "transform-flat",
   "transform-gpu",
   "transform-none",
+  "transform-stroke",
+  "transform-view",
   "transition",
   "transition-all",
   "transition-colors",
@@ -1595,18 +1679,27 @@ exports[`getClassList 1`] = `
   "translate-0.5",
   "translate-1",
   "translate-3",
+  "translate-3d",
   "translate-4",
   "translate-full",
   "translate-x-0.5",
   "translate-x-1",
   "translate-x-3",
   "translate-x-4",
   "translate-x-full",
+  "translate-x-px",
   "translate-y-0.5",
   "translate-y-1",
   "translate-y-3",
   "translate-y-4",
   "translate-y-full",
+  "translate-y-px",
+  "translate-z-0.5",
+  "translate-z-1",
+  "translate-z-3",
+  "translate-z-4",
+  "translate-z-full",
+  "translate-z-px",
   "truncate",
   "underline",
   "underline-offset-0",

packages/tailwindcss/src/index.test.ts

@@ -227,6 +227,12 @@ describe('@apply', () => {
         syntax: "<length-percentage>";
         inherits: false;
         initial-value: 0;
+      }
+
+      @property --tw-translate-z {
+        syntax: "<length-percentage>";
+        inherits: false;
+        initial-value: 0;
       }"
     `)
   })

packages/tailwindcss/src/intellisense.test.ts

@@ -14,6 +14,8 @@ function loadDesignSystem() {
   theme.add('--breakpoint-sm', '640px')
   theme.add('--font-size-xs', '0.75rem')
   theme.add('--font-size-xs--line-height', '1rem')
+  theme.add('--perspective-dramatic', '100px')
+  theme.add('--perspective-normal', '500px')
   return buildDesignSystem(theme)
 }
 

packages/tailwindcss/src/property-order.ts

@@ -74,9 +74,10 @@ export default [
   // '--tw-rotate',
   '--tw-skew-x',
   '--tw-skew-y',
+  '--tw-scale-x',
+  '--tw-scale-y',
+  '--tw-scale-z',
   'scale',
-  // '--tw-scale-x',
-  // '--tw-scale-y',
   'transform',
 
   'animation',

packages/tailwindcss/src/theme.ts

@@ -197,6 +197,8 @@ export type ThemeKey =
   | '--outline-offset'
   | '--padding'
   | '--placeholder-color'
+  | '--perspective'
+  | '--perspective-origin'
   | '--radius'
   | '--ring-color'
   | '--ring-offset-color'