From 36dd50ebabfb23b69ceb40a0c29e2a9b96b9d2c8 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 3 Feb 2020 11:28:04 -0500
Subject: [PATCH] Add some default skew values

---
 .../fixtures/tailwind-output-important.css    | 840 ++++++++++++++++++
 __tests__/fixtures/tailwind-output.css        | 840 ++++++++++++++++++
 stubs/defaultConfig.stub.js                   |  10 +-
 3 files changed, 1689 insertions(+), 1 deletion(-)

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index e3fafe0dd..d4e5efc53 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -10508,6 +10508,174 @@ video {
   --transform-translate-y: 100% !important;
 }
 
+.skew-x-0 {
+  --transform-skew-x: 0 !important;
+}
+
+.skew-x-3 {
+  --transform-skew-x: 3deg !important;
+}
+
+.skew-x-6 {
+  --transform-skew-x: 6deg !important;
+}
+
+.skew-x-12 {
+  --transform-skew-x: 12deg !important;
+}
+
+.-skew-x-12 {
+  --transform-skew-x: -12deg !important;
+}
+
+.-skew-x-6 {
+  --transform-skew-x: -6deg !important;
+}
+
+.-skew-x-3 {
+  --transform-skew-x: -3deg !important;
+}
+
+.skew-y-0 {
+  --transform-skew-y: 0 !important;
+}
+
+.skew-y-3 {
+  --transform-skew-y: 3deg !important;
+}
+
+.skew-y-6 {
+  --transform-skew-y: 6deg !important;
+}
+
+.skew-y-12 {
+  --transform-skew-y: 12deg !important;
+}
+
+.-skew-y-12 {
+  --transform-skew-y: -12deg !important;
+}
+
+.-skew-y-6 {
+  --transform-skew-y: -6deg !important;
+}
+
+.-skew-y-3 {
+  --transform-skew-y: -3deg !important;
+}
+
+.hover\:skew-x-0:hover {
+  --transform-skew-x: 0 !important;
+}
+
+.hover\:skew-x-3:hover {
+  --transform-skew-x: 3deg !important;
+}
+
+.hover\:skew-x-6:hover {
+  --transform-skew-x: 6deg !important;
+}
+
+.hover\:skew-x-12:hover {
+  --transform-skew-x: 12deg !important;
+}
+
+.hover\:-skew-x-12:hover {
+  --transform-skew-x: -12deg !important;
+}
+
+.hover\:-skew-x-6:hover {
+  --transform-skew-x: -6deg !important;
+}
+
+.hover\:-skew-x-3:hover {
+  --transform-skew-x: -3deg !important;
+}
+
+.hover\:skew-y-0:hover {
+  --transform-skew-y: 0 !important;
+}
+
+.hover\:skew-y-3:hover {
+  --transform-skew-y: 3deg !important;
+}
+
+.hover\:skew-y-6:hover {
+  --transform-skew-y: 6deg !important;
+}
+
+.hover\:skew-y-12:hover {
+  --transform-skew-y: 12deg !important;
+}
+
+.hover\:-skew-y-12:hover {
+  --transform-skew-y: -12deg !important;
+}
+
+.hover\:-skew-y-6:hover {
+  --transform-skew-y: -6deg !important;
+}
+
+.hover\:-skew-y-3:hover {
+  --transform-skew-y: -3deg !important;
+}
+
+.focus\:skew-x-0:focus {
+  --transform-skew-x: 0 !important;
+}
+
+.focus\:skew-x-3:focus {
+  --transform-skew-x: 3deg !important;
+}
+
+.focus\:skew-x-6:focus {
+  --transform-skew-x: 6deg !important;
+}
+
+.focus\:skew-x-12:focus {
+  --transform-skew-x: 12deg !important;
+}
+
+.focus\:-skew-x-12:focus {
+  --transform-skew-x: -12deg !important;
+}
+
+.focus\:-skew-x-6:focus {
+  --transform-skew-x: -6deg !important;
+}
+
+.focus\:-skew-x-3:focus {
+  --transform-skew-x: -3deg !important;
+}
+
+.focus\:skew-y-0:focus {
+  --transform-skew-y: 0 !important;
+}
+
+.focus\:skew-y-3:focus {
+  --transform-skew-y: 3deg !important;
+}
+
+.focus\:skew-y-6:focus {
+  --transform-skew-y: 6deg !important;
+}
+
+.focus\:skew-y-12:focus {
+  --transform-skew-y: 12deg !important;
+}
+
+.focus\:-skew-y-12:focus {
+  --transform-skew-y: -12deg !important;
+}
+
+.focus\:-skew-y-6:focus {
+  --transform-skew-y: -6deg !important;
+}
+
+.focus\:-skew-y-3:focus {
+  --transform-skew-y: -3deg !important;
+}
+
 .transition-none {
   transition-property: none !important;
 }
@@ -20493,6 +20661,174 @@ video {
     --transform-translate-y: 100% !important;
   }
 
+  .sm\:skew-x-0 {
+    --transform-skew-x: 0 !important;
+  }
+
+  .sm\:skew-x-3 {
+    --transform-skew-x: 3deg !important;
+  }
+
+  .sm\:skew-x-6 {
+    --transform-skew-x: 6deg !important;
+  }
+
+  .sm\:skew-x-12 {
+    --transform-skew-x: 12deg !important;
+  }
+
+  .sm\:-skew-x-12 {
+    --transform-skew-x: -12deg !important;
+  }
+
+  .sm\:-skew-x-6 {
+    --transform-skew-x: -6deg !important;
+  }
+
+  .sm\:-skew-x-3 {
+    --transform-skew-x: -3deg !important;
+  }
+
+  .sm\:skew-y-0 {
+    --transform-skew-y: 0 !important;
+  }
+
+  .sm\:skew-y-3 {
+    --transform-skew-y: 3deg !important;
+  }
+
+  .sm\:skew-y-6 {
+    --transform-skew-y: 6deg !important;
+  }
+
+  .sm\:skew-y-12 {
+    --transform-skew-y: 12deg !important;
+  }
+
+  .sm\:-skew-y-12 {
+    --transform-skew-y: -12deg !important;
+  }
+
+  .sm\:-skew-y-6 {
+    --transform-skew-y: -6deg !important;
+  }
+
+  .sm\:-skew-y-3 {
+    --transform-skew-y: -3deg !important;
+  }
+
+  .sm\:hover\:skew-x-0:hover {
+    --transform-skew-x: 0 !important;
+  }
+
+  .sm\:hover\:skew-x-3:hover {
+    --transform-skew-x: 3deg !important;
+  }
+
+  .sm\:hover\:skew-x-6:hover {
+    --transform-skew-x: 6deg !important;
+  }
+
+  .sm\:hover\:skew-x-12:hover {
+    --transform-skew-x: 12deg !important;
+  }
+
+  .sm\:hover\:-skew-x-12:hover {
+    --transform-skew-x: -12deg !important;
+  }
+
+  .sm\:hover\:-skew-x-6:hover {
+    --transform-skew-x: -6deg !important;
+  }
+
+  .sm\:hover\:-skew-x-3:hover {
+    --transform-skew-x: -3deg !important;
+  }
+
+  .sm\:hover\:skew-y-0:hover {
+    --transform-skew-y: 0 !important;
+  }
+
+  .sm\:hover\:skew-y-3:hover {
+    --transform-skew-y: 3deg !important;
+  }
+
+  .sm\:hover\:skew-y-6:hover {
+    --transform-skew-y: 6deg !important;
+  }
+
+  .sm\:hover\:skew-y-12:hover {
+    --transform-skew-y: 12deg !important;
+  }
+
+  .sm\:hover\:-skew-y-12:hover {
+    --transform-skew-y: -12deg !important;
+  }
+
+  .sm\:hover\:-skew-y-6:hover {
+    --transform-skew-y: -6deg !important;
+  }
+
+  .sm\:hover\:-skew-y-3:hover {
+    --transform-skew-y: -3deg !important;
+  }
+
+  .sm\:focus\:skew-x-0:focus {
+    --transform-skew-x: 0 !important;
+  }
+
+  .sm\:focus\:skew-x-3:focus {
+    --transform-skew-x: 3deg !important;
+  }
+
+  .sm\:focus\:skew-x-6:focus {
+    --transform-skew-x: 6deg !important;
+  }
+
+  .sm\:focus\:skew-x-12:focus {
+    --transform-skew-x: 12deg !important;
+  }
+
+  .sm\:focus\:-skew-x-12:focus {
+    --transform-skew-x: -12deg !important;
+  }
+
+  .sm\:focus\:-skew-x-6:focus {
+    --transform-skew-x: -6deg !important;
+  }
+
+  .sm\:focus\:-skew-x-3:focus {
+    --transform-skew-x: -3deg !important;
+  }
+
+  .sm\:focus\:skew-y-0:focus {
+    --transform-skew-y: 0 !important;
+  }
+
+  .sm\:focus\:skew-y-3:focus {
+    --transform-skew-y: 3deg !important;
+  }
+
+  .sm\:focus\:skew-y-6:focus {
+    --transform-skew-y: 6deg !important;
+  }
+
+  .sm\:focus\:skew-y-12:focus {
+    --transform-skew-y: 12deg !important;
+  }
+
+  .sm\:focus\:-skew-y-12:focus {
+    --transform-skew-y: -12deg !important;
+  }
+
+  .sm\:focus\:-skew-y-6:focus {
+    --transform-skew-y: -6deg !important;
+  }
+
+  .sm\:focus\:-skew-y-3:focus {
+    --transform-skew-y: -3deg !important;
+  }
+
   .sm\:transition-none {
     transition-property: none !important;
   }
@@ -30479,6 +30815,174 @@ video {
     --transform-translate-y: 100% !important;
   }
 
+  .md\:skew-x-0 {
+    --transform-skew-x: 0 !important;
+  }
+
+  .md\:skew-x-3 {
+    --transform-skew-x: 3deg !important;
+  }
+
+  .md\:skew-x-6 {
+    --transform-skew-x: 6deg !important;
+  }
+
+  .md\:skew-x-12 {
+    --transform-skew-x: 12deg !important;
+  }
+
+  .md\:-skew-x-12 {
+    --transform-skew-x: -12deg !important;
+  }
+
+  .md\:-skew-x-6 {
+    --transform-skew-x: -6deg !important;
+  }
+
+  .md\:-skew-x-3 {
+    --transform-skew-x: -3deg !important;
+  }
+
+  .md\:skew-y-0 {
+    --transform-skew-y: 0 !important;
+  }
+
+  .md\:skew-y-3 {
+    --transform-skew-y: 3deg !important;
+  }
+
+  .md\:skew-y-6 {
+    --transform-skew-y: 6deg !important;
+  }
+
+  .md\:skew-y-12 {
+    --transform-skew-y: 12deg !important;
+  }
+
+  .md\:-skew-y-12 {
+    --transform-skew-y: -12deg !important;
+  }
+
+  .md\:-skew-y-6 {
+    --transform-skew-y: -6deg !important;
+  }
+
+  .md\:-skew-y-3 {
+    --transform-skew-y: -3deg !important;
+  }
+
+  .md\:hover\:skew-x-0:hover {
+    --transform-skew-x: 0 !important;
+  }
+
+  .md\:hover\:skew-x-3:hover {
+    --transform-skew-x: 3deg !important;
+  }
+
+  .md\:hover\:skew-x-6:hover {
+    --transform-skew-x: 6deg !important;
+  }
+
+  .md\:hover\:skew-x-12:hover {
+    --transform-skew-x: 12deg !important;
+  }
+
+  .md\:hover\:-skew-x-12:hover {
+    --transform-skew-x: -12deg !important;
+  }
+
+  .md\:hover\:-skew-x-6:hover {
+    --transform-skew-x: -6deg !important;
+  }
+
+  .md\:hover\:-skew-x-3:hover {
+    --transform-skew-x: -3deg !important;
+  }
+
+  .md\:hover\:skew-y-0:hover {
+    --transform-skew-y: 0 !important;
+  }
+
+  .md\:hover\:skew-y-3:hover {
+    --transform-skew-y: 3deg !important;
+  }
+
+  .md\:hover\:skew-y-6:hover {
+    --transform-skew-y: 6deg !important;
+  }
+
+  .md\:hover\:skew-y-12:hover {
+    --transform-skew-y: 12deg !important;
+  }
+
+  .md\:hover\:-skew-y-12:hover {
+    --transform-skew-y: -12deg !important;
+  }
+
+  .md\:hover\:-skew-y-6:hover {
+    --transform-skew-y: -6deg !important;
+  }
+
+  .md\:hover\:-skew-y-3:hover {
+    --transform-skew-y: -3deg !important;
+  }
+
+  .md\:focus\:skew-x-0:focus {
+    --transform-skew-x: 0 !important;
+  }
+
+  .md\:focus\:skew-x-3:focus {
+    --transform-skew-x: 3deg !important;
+  }
+
+  .md\:focus\:skew-x-6:focus {
+    --transform-skew-x: 6deg !important;
+  }
+
+  .md\:focus\:skew-x-12:focus {
+    --transform-skew-x: 12deg !important;
+  }
+
+  .md\:focus\:-skew-x-12:focus {
+    --transform-skew-x: -12deg !important;
+  }
+
+  .md\:focus\:-skew-x-6:focus {
+    --transform-skew-x: -6deg !important;
+  }
+
+  .md\:focus\:-skew-x-3:focus {
+    --transform-skew-x: -3deg !important;
+  }
+
+  .md\:focus\:skew-y-0:focus {
+    --transform-skew-y: 0 !important;
+  }
+
+  .md\:focus\:skew-y-3:focus {
+    --transform-skew-y: 3deg !important;
+  }
+
+  .md\:focus\:skew-y-6:focus {
+    --transform-skew-y: 6deg !important;
+  }
+
+  .md\:focus\:skew-y-12:focus {
+    --transform-skew-y: 12deg !important;
+  }
+
+  .md\:focus\:-skew-y-12:focus {
+    --transform-skew-y: -12deg !important;
+  }
+
+  .md\:focus\:-skew-y-6:focus {
+    --transform-skew-y: -6deg !important;
+  }
+
+  .md\:focus\:-skew-y-3:focus {
+    --transform-skew-y: -3deg !important;
+  }
+
   .md\:transition-none {
     transition-property: none !important;
   }
@@ -40465,6 +40969,174 @@ video {
     --transform-translate-y: 100% !important;
   }
 
+  .lg\:skew-x-0 {
+    --transform-skew-x: 0 !important;
+  }
+
+  .lg\:skew-x-3 {
+    --transform-skew-x: 3deg !important;
+  }
+
+  .lg\:skew-x-6 {
+    --transform-skew-x: 6deg !important;
+  }
+
+  .lg\:skew-x-12 {
+    --transform-skew-x: 12deg !important;
+  }
+
+  .lg\:-skew-x-12 {
+    --transform-skew-x: -12deg !important;
+  }
+
+  .lg\:-skew-x-6 {
+    --transform-skew-x: -6deg !important;
+  }
+
+  .lg\:-skew-x-3 {
+    --transform-skew-x: -3deg !important;
+  }
+
+  .lg\:skew-y-0 {
+    --transform-skew-y: 0 !important;
+  }
+
+  .lg\:skew-y-3 {
+    --transform-skew-y: 3deg !important;
+  }
+
+  .lg\:skew-y-6 {
+    --transform-skew-y: 6deg !important;
+  }
+
+  .lg\:skew-y-12 {
+    --transform-skew-y: 12deg !important;
+  }
+
+  .lg\:-skew-y-12 {
+    --transform-skew-y: -12deg !important;
+  }
+
+  .lg\:-skew-y-6 {
+    --transform-skew-y: -6deg !important;
+  }
+
+  .lg\:-skew-y-3 {
+    --transform-skew-y: -3deg !important;
+  }
+
+  .lg\:hover\:skew-x-0:hover {
+    --transform-skew-x: 0 !important;
+  }
+
+  .lg\:hover\:skew-x-3:hover {
+    --transform-skew-x: 3deg !important;
+  }
+
+  .lg\:hover\:skew-x-6:hover {
+    --transform-skew-x: 6deg !important;
+  }
+
+  .lg\:hover\:skew-x-12:hover {
+    --transform-skew-x: 12deg !important;
+  }
+
+  .lg\:hover\:-skew-x-12:hover {
+    --transform-skew-x: -12deg !important;
+  }
+
+  .lg\:hover\:-skew-x-6:hover {
+    --transform-skew-x: -6deg !important;
+  }
+
+  .lg\:hover\:-skew-x-3:hover {
+    --transform-skew-x: -3deg !important;
+  }
+
+  .lg\:hover\:skew-y-0:hover {
+    --transform-skew-y: 0 !important;
+  }
+
+  .lg\:hover\:skew-y-3:hover {
+    --transform-skew-y: 3deg !important;
+  }
+
+  .lg\:hover\:skew-y-6:hover {
+    --transform-skew-y: 6deg !important;
+  }
+
+  .lg\:hover\:skew-y-12:hover {
+    --transform-skew-y: 12deg !important;
+  }
+
+  .lg\:hover\:-skew-y-12:hover {
+    --transform-skew-y: -12deg !important;
+  }
+
+  .lg\:hover\:-skew-y-6:hover {
+    --transform-skew-y: -6deg !important;
+  }
+
+  .lg\:hover\:-skew-y-3:hover {
+    --transform-skew-y: -3deg !important;
+  }
+
+  .lg\:focus\:skew-x-0:focus {
+    --transform-skew-x: 0 !important;
+  }
+
+  .lg\:focus\:skew-x-3:focus {
+    --transform-skew-x: 3deg !important;
+  }
+
+  .lg\:focus\:skew-x-6:focus {
+    --transform-skew-x: 6deg !important;
+  }
+
+  .lg\:focus\:skew-x-12:focus {
+    --transform-skew-x: 12deg !important;
+  }
+
+  .lg\:focus\:-skew-x-12:focus {
+    --transform-skew-x: -12deg !important;
+  }
+
+  .lg\:focus\:-skew-x-6:focus {
+    --transform-skew-x: -6deg !important;
+  }
+
+  .lg\:focus\:-skew-x-3:focus {
+    --transform-skew-x: -3deg !important;
+  }
+
+  .lg\:focus\:skew-y-0:focus {
+    --transform-skew-y: 0 !important;
+  }
+
+  .lg\:focus\:skew-y-3:focus {
+    --transform-skew-y: 3deg !important;
+  }
+
+  .lg\:focus\:skew-y-6:focus {
+    --transform-skew-y: 6deg !important;
+  }
+
+  .lg\:focus\:skew-y-12:focus {
+    --transform-skew-y: 12deg !important;
+  }
+
+  .lg\:focus\:-skew-y-12:focus {
+    --transform-skew-y: -12deg !important;
+  }
+
+  .lg\:focus\:-skew-y-6:focus {
+    --transform-skew-y: -6deg !important;
+  }
+
+  .lg\:focus\:-skew-y-3:focus {
+    --transform-skew-y: -3deg !important;
+  }
+
   .lg\:transition-none {
     transition-property: none !important;
   }
@@ -50451,6 +51123,174 @@ video {
     --transform-translate-y: 100% !important;
   }
 
+  .xl\:skew-x-0 {
+    --transform-skew-x: 0 !important;
+  }
+
+  .xl\:skew-x-3 {
+    --transform-skew-x: 3deg !important;
+  }
+
+  .xl\:skew-x-6 {
+    --transform-skew-x: 6deg !important;
+  }
+
+  .xl\:skew-x-12 {
+    --transform-skew-x: 12deg !important;
+  }
+
+  .xl\:-skew-x-12 {
+    --transform-skew-x: -12deg !important;
+  }
+
+  .xl\:-skew-x-6 {
+    --transform-skew-x: -6deg !important;
+  }
+
+  .xl\:-skew-x-3 {
+    --transform-skew-x: -3deg !important;
+  }
+
+  .xl\:skew-y-0 {
+    --transform-skew-y: 0 !important;
+  }
+
+  .xl\:skew-y-3 {
+    --transform-skew-y: 3deg !important;
+  }
+
+  .xl\:skew-y-6 {
+    --transform-skew-y: 6deg !important;
+  }
+
+  .xl\:skew-y-12 {
+    --transform-skew-y: 12deg !important;
+  }
+
+  .xl\:-skew-y-12 {
+    --transform-skew-y: -12deg !important;
+  }
+
+  .xl\:-skew-y-6 {
+    --transform-skew-y: -6deg !important;
+  }
+
+  .xl\:-skew-y-3 {
+    --transform-skew-y: -3deg !important;
+  }
+
+  .xl\:hover\:skew-x-0:hover {
+    --transform-skew-x: 0 !important;
+  }
+
+  .xl\:hover\:skew-x-3:hover {
+    --transform-skew-x: 3deg !important;
+  }
+
+  .xl\:hover\:skew-x-6:hover {
+    --transform-skew-x: 6deg !important;
+  }
+
+  .xl\:hover\:skew-x-12:hover {
+    --transform-skew-x: 12deg !important;
+  }
+
+  .xl\:hover\:-skew-x-12:hover {
+    --transform-skew-x: -12deg !important;
+  }
+
+  .xl\:hover\:-skew-x-6:hover {
+    --transform-skew-x: -6deg !important;
+  }
+
+  .xl\:hover\:-skew-x-3:hover {
+    --transform-skew-x: -3deg !important;
+  }
+
+  .xl\:hover\:skew-y-0:hover {
+    --transform-skew-y: 0 !important;
+  }
+
+  .xl\:hover\:skew-y-3:hover {
+    --transform-skew-y: 3deg !important;
+  }
+
+  .xl\:hover\:skew-y-6:hover {
+    --transform-skew-y: 6deg !important;
+  }
+
+  .xl\:hover\:skew-y-12:hover {
+    --transform-skew-y: 12deg !important;
+  }
+
+  .xl\:hover\:-skew-y-12:hover {
+    --transform-skew-y: -12deg !important;
+  }
+
+  .xl\:hover\:-skew-y-6:hover {
+    --transform-skew-y: -6deg !important;
+  }
+
+  .xl\:hover\:-skew-y-3:hover {
+    --transform-skew-y: -3deg !important;
+  }
+
+  .xl\:focus\:skew-x-0:focus {
+    --transform-skew-x: 0 !important;
+  }
+
+  .xl\:focus\:skew-x-3:focus {
+    --transform-skew-x: 3deg !important;
+  }
+
+  .xl\:focus\:skew-x-6:focus {
+    --transform-skew-x: 6deg !important;
+  }
+
+  .xl\:focus\:skew-x-12:focus {
+    --transform-skew-x: 12deg !important;
+  }
+
+  .xl\:focus\:-skew-x-12:focus {
+    --transform-skew-x: -12deg !important;
+  }
+
+  .xl\:focus\:-skew-x-6:focus {
+    --transform-skew-x: -6deg !important;
+  }
+
+  .xl\:focus\:-skew-x-3:focus {
+    --transform-skew-x: -3deg !important;
+  }
+
+  .xl\:focus\:skew-y-0:focus {
+    --transform-skew-y: 0 !important;
+  }
+
+  .xl\:focus\:skew-y-3:focus {
+    --transform-skew-y: 3deg !important;
+  }
+
+  .xl\:focus\:skew-y-6:focus {
+    --transform-skew-y: 6deg !important;
+  }
+
+  .xl\:focus\:skew-y-12:focus {
+    --transform-skew-y: 12deg !important;
+  }
+
+  .xl\:focus\:-skew-y-12:focus {
+    --transform-skew-y: -12deg !important;
+  }
+
+  .xl\:focus\:-skew-y-6:focus {
+    --transform-skew-y: -6deg !important;
+  }
+
+  .xl\:focus\:-skew-y-3:focus {
+    --transform-skew-y: -3deg !important;
+  }
+
   .xl\:transition-none {
     transition-property: none !important;
   }
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index e17b72f6b..005eea6bd 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -10508,6 +10508,174 @@ video {
   --transform-translate-y: 100%;
 }
 
+.skew-x-0 {
+  --transform-skew-x: 0;
+}
+
+.skew-x-3 {
+  --transform-skew-x: 3deg;
+}
+
+.skew-x-6 {
+  --transform-skew-x: 6deg;
+}
+
+.skew-x-12 {
+  --transform-skew-x: 12deg;
+}
+
+.-skew-x-12 {
+  --transform-skew-x: -12deg;
+}
+
+.-skew-x-6 {
+  --transform-skew-x: -6deg;
+}
+
+.-skew-x-3 {
+  --transform-skew-x: -3deg;
+}
+
+.skew-y-0 {
+  --transform-skew-y: 0;
+}
+
+.skew-y-3 {
+  --transform-skew-y: 3deg;
+}
+
+.skew-y-6 {
+  --transform-skew-y: 6deg;
+}
+
+.skew-y-12 {
+  --transform-skew-y: 12deg;
+}
+
+.-skew-y-12 {
+  --transform-skew-y: -12deg;
+}
+
+.-skew-y-6 {
+  --transform-skew-y: -6deg;
+}
+
+.-skew-y-3 {
+  --transform-skew-y: -3deg;
+}
+
+.hover\:skew-x-0:hover {
+  --transform-skew-x: 0;
+}
+
+.hover\:skew-x-3:hover {
+  --transform-skew-x: 3deg;
+}
+
+.hover\:skew-x-6:hover {
+  --transform-skew-x: 6deg;
+}
+
+.hover\:skew-x-12:hover {
+  --transform-skew-x: 12deg;
+}
+
+.hover\:-skew-x-12:hover {
+  --transform-skew-x: -12deg;
+}
+
+.hover\:-skew-x-6:hover {
+  --transform-skew-x: -6deg;
+}
+
+.hover\:-skew-x-3:hover {
+  --transform-skew-x: -3deg;
+}
+
+.hover\:skew-y-0:hover {
+  --transform-skew-y: 0;
+}
+
+.hover\:skew-y-3:hover {
+  --transform-skew-y: 3deg;
+}
+
+.hover\:skew-y-6:hover {
+  --transform-skew-y: 6deg;
+}
+
+.hover\:skew-y-12:hover {
+  --transform-skew-y: 12deg;
+}
+
+.hover\:-skew-y-12:hover {
+  --transform-skew-y: -12deg;
+}
+
+.hover\:-skew-y-6:hover {
+  --transform-skew-y: -6deg;
+}
+
+.hover\:-skew-y-3:hover {
+  --transform-skew-y: -3deg;
+}
+
+.focus\:skew-x-0:focus {
+  --transform-skew-x: 0;
+}
+
+.focus\:skew-x-3:focus {
+  --transform-skew-x: 3deg;
+}
+
+.focus\:skew-x-6:focus {
+  --transform-skew-x: 6deg;
+}
+
+.focus\:skew-x-12:focus {
+  --transform-skew-x: 12deg;
+}
+
+.focus\:-skew-x-12:focus {
+  --transform-skew-x: -12deg;
+}
+
+.focus\:-skew-x-6:focus {
+  --transform-skew-x: -6deg;
+}
+
+.focus\:-skew-x-3:focus {
+  --transform-skew-x: -3deg;
+}
+
+.focus\:skew-y-0:focus {
+  --transform-skew-y: 0;
+}
+
+.focus\:skew-y-3:focus {
+  --transform-skew-y: 3deg;
+}
+
+.focus\:skew-y-6:focus {
+  --transform-skew-y: 6deg;
+}
+
+.focus\:skew-y-12:focus {
+  --transform-skew-y: 12deg;
+}
+
+.focus\:-skew-y-12:focus {
+  --transform-skew-y: -12deg;
+}
+
+.focus\:-skew-y-6:focus {
+  --transform-skew-y: -6deg;
+}
+
+.focus\:-skew-y-3:focus {
+  --transform-skew-y: -3deg;
+}
+
 .transition-none {
   transition-property: none;
 }
@@ -20493,6 +20661,174 @@ video {
     --transform-translate-y: 100%;
   }
 
+  .sm\:skew-x-0 {
+    --transform-skew-x: 0;
+  }
+
+  .sm\:skew-x-3 {
+    --transform-skew-x: 3deg;
+  }
+
+  .sm\:skew-x-6 {
+    --transform-skew-x: 6deg;
+  }
+
+  .sm\:skew-x-12 {
+    --transform-skew-x: 12deg;
+  }
+
+  .sm\:-skew-x-12 {
+    --transform-skew-x: -12deg;
+  }
+
+  .sm\:-skew-x-6 {
+    --transform-skew-x: -6deg;
+  }
+
+  .sm\:-skew-x-3 {
+    --transform-skew-x: -3deg;
+  }
+
+  .sm\:skew-y-0 {
+    --transform-skew-y: 0;
+  }
+
+  .sm\:skew-y-3 {
+    --transform-skew-y: 3deg;
+  }
+
+  .sm\:skew-y-6 {
+    --transform-skew-y: 6deg;
+  }
+
+  .sm\:skew-y-12 {
+    --transform-skew-y: 12deg;
+  }
+
+  .sm\:-skew-y-12 {
+    --transform-skew-y: -12deg;
+  }
+
+  .sm\:-skew-y-6 {
+    --transform-skew-y: -6deg;
+  }
+
+  .sm\:-skew-y-3 {
+    --transform-skew-y: -3deg;
+  }
+
+  .sm\:hover\:skew-x-0:hover {
+    --transform-skew-x: 0;
+  }
+
+  .sm\:hover\:skew-x-3:hover {
+    --transform-skew-x: 3deg;
+  }
+
+  .sm\:hover\:skew-x-6:hover {
+    --transform-skew-x: 6deg;
+  }
+
+  .sm\:hover\:skew-x-12:hover {
+    --transform-skew-x: 12deg;
+  }
+
+  .sm\:hover\:-skew-x-12:hover {
+    --transform-skew-x: -12deg;
+  }
+
+  .sm\:hover\:-skew-x-6:hover {
+    --transform-skew-x: -6deg;
+  }
+
+  .sm\:hover\:-skew-x-3:hover {
+    --transform-skew-x: -3deg;
+  }
+
+  .sm\:hover\:skew-y-0:hover {
+    --transform-skew-y: 0;
+  }
+
+  .sm\:hover\:skew-y-3:hover {
+    --transform-skew-y: 3deg;
+  }
+
+  .sm\:hover\:skew-y-6:hover {
+    --transform-skew-y: 6deg;
+  }
+
+  .sm\:hover\:skew-y-12:hover {
+    --transform-skew-y: 12deg;
+  }
+
+  .sm\:hover\:-skew-y-12:hover {
+    --transform-skew-y: -12deg;
+  }
+
+  .sm\:hover\:-skew-y-6:hover {
+    --transform-skew-y: -6deg;
+  }
+
+  .sm\:hover\:-skew-y-3:hover {
+    --transform-skew-y: -3deg;
+  }
+
+  .sm\:focus\:skew-x-0:focus {
+    --transform-skew-x: 0;
+  }
+
+  .sm\:focus\:skew-x-3:focus {
+    --transform-skew-x: 3deg;
+  }
+
+  .sm\:focus\:skew-x-6:focus {
+    --transform-skew-x: 6deg;
+  }
+
+  .sm\:focus\:skew-x-12:focus {
+    --transform-skew-x: 12deg;
+  }
+
+  .sm\:focus\:-skew-x-12:focus {
+    --transform-skew-x: -12deg;
+  }
+
+  .sm\:focus\:-skew-x-6:focus {
+    --transform-skew-x: -6deg;
+  }
+
+  .sm\:focus\:-skew-x-3:focus {
+    --transform-skew-x: -3deg;
+  }
+
+  .sm\:focus\:skew-y-0:focus {
+    --transform-skew-y: 0;
+  }
+
+  .sm\:focus\:skew-y-3:focus {
+    --transform-skew-y: 3deg;
+  }
+
+  .sm\:focus\:skew-y-6:focus {
+    --transform-skew-y: 6deg;
+  }
+
+  .sm\:focus\:skew-y-12:focus {
+    --transform-skew-y: 12deg;
+  }
+
+  .sm\:focus\:-skew-y-12:focus {
+    --transform-skew-y: -12deg;
+  }
+
+  .sm\:focus\:-skew-y-6:focus {
+    --transform-skew-y: -6deg;
+  }
+
+  .sm\:focus\:-skew-y-3:focus {
+    --transform-skew-y: -3deg;
+  }
+
   .sm\:transition-none {
     transition-property: none;
   }
@@ -30479,6 +30815,174 @@ video {
     --transform-translate-y: 100%;
   }
 
+  .md\:skew-x-0 {
+    --transform-skew-x: 0;
+  }
+
+  .md\:skew-x-3 {
+    --transform-skew-x: 3deg;
+  }
+
+  .md\:skew-x-6 {
+    --transform-skew-x: 6deg;
+  }
+
+  .md\:skew-x-12 {
+    --transform-skew-x: 12deg;
+  }
+
+  .md\:-skew-x-12 {
+    --transform-skew-x: -12deg;
+  }
+
+  .md\:-skew-x-6 {
+    --transform-skew-x: -6deg;
+  }
+
+  .md\:-skew-x-3 {
+    --transform-skew-x: -3deg;
+  }
+
+  .md\:skew-y-0 {
+    --transform-skew-y: 0;
+  }
+
+  .md\:skew-y-3 {
+    --transform-skew-y: 3deg;
+  }
+
+  .md\:skew-y-6 {
+    --transform-skew-y: 6deg;
+  }
+
+  .md\:skew-y-12 {
+    --transform-skew-y: 12deg;
+  }
+
+  .md\:-skew-y-12 {
+    --transform-skew-y: -12deg;
+  }
+
+  .md\:-skew-y-6 {
+    --transform-skew-y: -6deg;
+  }
+
+  .md\:-skew-y-3 {
+    --transform-skew-y: -3deg;
+  }
+
+  .md\:hover\:skew-x-0:hover {
+    --transform-skew-x: 0;
+  }
+
+  .md\:hover\:skew-x-3:hover {
+    --transform-skew-x: 3deg;
+  }
+
+  .md\:hover\:skew-x-6:hover {
+    --transform-skew-x: 6deg;
+  }
+
+  .md\:hover\:skew-x-12:hover {
+    --transform-skew-x: 12deg;
+  }
+
+  .md\:hover\:-skew-x-12:hover {
+    --transform-skew-x: -12deg;
+  }
+
+  .md\:hover\:-skew-x-6:hover {
+    --transform-skew-x: -6deg;
+  }
+
+  .md\:hover\:-skew-x-3:hover {
+    --transform-skew-x: -3deg;
+  }
+
+  .md\:hover\:skew-y-0:hover {
+    --transform-skew-y: 0;
+  }
+
+  .md\:hover\:skew-y-3:hover {
+    --transform-skew-y: 3deg;
+  }
+
+  .md\:hover\:skew-y-6:hover {
+    --transform-skew-y: 6deg;
+  }
+
+  .md\:hover\:skew-y-12:hover {
+    --transform-skew-y: 12deg;
+  }
+
+  .md\:hover\:-skew-y-12:hover {
+    --transform-skew-y: -12deg;
+  }
+
+  .md\:hover\:-skew-y-6:hover {
+    --transform-skew-y: -6deg;
+  }
+
+  .md\:hover\:-skew-y-3:hover {
+    --transform-skew-y: -3deg;
+  }
+
+  .md\:focus\:skew-x-0:focus {
+    --transform-skew-x: 0;
+  }
+
+  .md\:focus\:skew-x-3:focus {
+    --transform-skew-x: 3deg;
+  }
+
+  .md\:focus\:skew-x-6:focus {
+    --transform-skew-x: 6deg;
+  }
+
+  .md\:focus\:skew-x-12:focus {
+    --transform-skew-x: 12deg;
+  }
+
+  .md\:focus\:-skew-x-12:focus {
+    --transform-skew-x: -12deg;
+  }
+
+  .md\:focus\:-skew-x-6:focus {
+    --transform-skew-x: -6deg;
+  }
+
+  .md\:focus\:-skew-x-3:focus {
+    --transform-skew-x: -3deg;
+  }
+
+  .md\:focus\:skew-y-0:focus {
+    --transform-skew-y: 0;
+  }
+
+  .md\:focus\:skew-y-3:focus {
+    --transform-skew-y: 3deg;
+  }
+
+  .md\:focus\:skew-y-6:focus {
+    --transform-skew-y: 6deg;
+  }
+
+  .md\:focus\:skew-y-12:focus {
+    --transform-skew-y: 12deg;
+  }
+
+  .md\:focus\:-skew-y-12:focus {
+    --transform-skew-y: -12deg;
+  }
+
+  .md\:focus\:-skew-y-6:focus {
+    --transform-skew-y: -6deg;
+  }
+
+  .md\:focus\:-skew-y-3:focus {
+    --transform-skew-y: -3deg;
+  }
+
   .md\:transition-none {
     transition-property: none;
   }
@@ -40465,6 +40969,174 @@ video {
     --transform-translate-y: 100%;
   }
 
+  .lg\:skew-x-0 {
+    --transform-skew-x: 0;
+  }
+
+  .lg\:skew-x-3 {
+    --transform-skew-x: 3deg;
+  }
+
+  .lg\:skew-x-6 {
+    --transform-skew-x: 6deg;
+  }
+
+  .lg\:skew-x-12 {
+    --transform-skew-x: 12deg;
+  }
+
+  .lg\:-skew-x-12 {
+    --transform-skew-x: -12deg;
+  }
+
+  .lg\:-skew-x-6 {
+    --transform-skew-x: -6deg;
+  }
+
+  .lg\:-skew-x-3 {
+    --transform-skew-x: -3deg;
+  }
+
+  .lg\:skew-y-0 {
+    --transform-skew-y: 0;
+  }
+
+  .lg\:skew-y-3 {
+    --transform-skew-y: 3deg;
+  }
+
+  .lg\:skew-y-6 {
+    --transform-skew-y: 6deg;
+  }
+
+  .lg\:skew-y-12 {
+    --transform-skew-y: 12deg;
+  }
+
+  .lg\:-skew-y-12 {
+    --transform-skew-y: -12deg;
+  }
+
+  .lg\:-skew-y-6 {
+    --transform-skew-y: -6deg;
+  }
+
+  .lg\:-skew-y-3 {
+    --transform-skew-y: -3deg;
+  }
+
+  .lg\:hover\:skew-x-0:hover {
+    --transform-skew-x: 0;
+  }
+
+  .lg\:hover\:skew-x-3:hover {
+    --transform-skew-x: 3deg;
+  }
+
+  .lg\:hover\:skew-x-6:hover {
+    --transform-skew-x: 6deg;
+  }
+
+  .lg\:hover\:skew-x-12:hover {
+    --transform-skew-x: 12deg;
+  }
+
+  .lg\:hover\:-skew-x-12:hover {
+    --transform-skew-x: -12deg;
+  }
+
+  .lg\:hover\:-skew-x-6:hover {
+    --transform-skew-x: -6deg;
+  }
+
+  .lg\:hover\:-skew-x-3:hover {
+    --transform-skew-x: -3deg;
+  }
+
+  .lg\:hover\:skew-y-0:hover {
+    --transform-skew-y: 0;
+  }
+
+  .lg\:hover\:skew-y-3:hover {
+    --transform-skew-y: 3deg;
+  }
+
+  .lg\:hover\:skew-y-6:hover {
+    --transform-skew-y: 6deg;
+  }
+
+  .lg\:hover\:skew-y-12:hover {
+    --transform-skew-y: 12deg;
+  }
+
+  .lg\:hover\:-skew-y-12:hover {
+    --transform-skew-y: -12deg;
+  }
+
+  .lg\:hover\:-skew-y-6:hover {
+    --transform-skew-y: -6deg;
+  }
+
+  .lg\:hover\:-skew-y-3:hover {
+    --transform-skew-y: -3deg;
+  }
+
+  .lg\:focus\:skew-x-0:focus {
+    --transform-skew-x: 0;
+  }
+
+  .lg\:focus\:skew-x-3:focus {
+    --transform-skew-x: 3deg;
+  }
+
+  .lg\:focus\:skew-x-6:focus {
+    --transform-skew-x: 6deg;
+  }
+
+  .lg\:focus\:skew-x-12:focus {
+    --transform-skew-x: 12deg;
+  }
+
+  .lg\:focus\:-skew-x-12:focus {
+    --transform-skew-x: -12deg;
+  }
+
+  .lg\:focus\:-skew-x-6:focus {
+    --transform-skew-x: -6deg;
+  }
+
+  .lg\:focus\:-skew-x-3:focus {
+    --transform-skew-x: -3deg;
+  }
+
+  .lg\:focus\:skew-y-0:focus {
+    --transform-skew-y: 0;
+  }
+
+  .lg\:focus\:skew-y-3:focus {
+    --transform-skew-y: 3deg;
+  }
+
+  .lg\:focus\:skew-y-6:focus {
+    --transform-skew-y: 6deg;
+  }
+
+  .lg\:focus\:skew-y-12:focus {
+    --transform-skew-y: 12deg;
+  }
+
+  .lg\:focus\:-skew-y-12:focus {
+    --transform-skew-y: -12deg;
+  }
+
+  .lg\:focus\:-skew-y-6:focus {
+    --transform-skew-y: -6deg;
+  }
+
+  .lg\:focus\:-skew-y-3:focus {
+    --transform-skew-y: -3deg;
+  }
+
   .lg\:transition-none {
     transition-property: none;
   }
@@ -50451,6 +51123,174 @@ video {
     --transform-translate-y: 100%;
   }
 
+  .xl\:skew-x-0 {
+    --transform-skew-x: 0;
+  }
+
+  .xl\:skew-x-3 {
+    --transform-skew-x: 3deg;
+  }
+
+  .xl\:skew-x-6 {
+    --transform-skew-x: 6deg;
+  }
+
+  .xl\:skew-x-12 {
+    --transform-skew-x: 12deg;
+  }
+
+  .xl\:-skew-x-12 {
+    --transform-skew-x: -12deg;
+  }
+
+  .xl\:-skew-x-6 {
+    --transform-skew-x: -6deg;
+  }
+
+  .xl\:-skew-x-3 {
+    --transform-skew-x: -3deg;
+  }
+
+  .xl\:skew-y-0 {
+    --transform-skew-y: 0;
+  }
+
+  .xl\:skew-y-3 {
+    --transform-skew-y: 3deg;
+  }
+
+  .xl\:skew-y-6 {
+    --transform-skew-y: 6deg;
+  }
+
+  .xl\:skew-y-12 {
+    --transform-skew-y: 12deg;
+  }
+
+  .xl\:-skew-y-12 {
+    --transform-skew-y: -12deg;
+  }
+
+  .xl\:-skew-y-6 {
+    --transform-skew-y: -6deg;
+  }
+
+  .xl\:-skew-y-3 {
+    --transform-skew-y: -3deg;
+  }
+
+  .xl\:hover\:skew-x-0:hover {
+    --transform-skew-x: 0;
+  }
+
+  .xl\:hover\:skew-x-3:hover {
+    --transform-skew-x: 3deg;
+  }
+
+  .xl\:hover\:skew-x-6:hover {
+    --transform-skew-x: 6deg;
+  }
+
+  .xl\:hover\:skew-x-12:hover {
+    --transform-skew-x: 12deg;
+  }
+
+  .xl\:hover\:-skew-x-12:hover {
+    --transform-skew-x: -12deg;
+  }
+
+  .xl\:hover\:-skew-x-6:hover {
+    --transform-skew-x: -6deg;
+  }
+
+  .xl\:hover\:-skew-x-3:hover {
+    --transform-skew-x: -3deg;
+  }
+
+  .xl\:hover\:skew-y-0:hover {
+    --transform-skew-y: 0;
+  }
+
+  .xl\:hover\:skew-y-3:hover {
+    --transform-skew-y: 3deg;
+  }
+
+  .xl\:hover\:skew-y-6:hover {
+    --transform-skew-y: 6deg;
+  }
+
+  .xl\:hover\:skew-y-12:hover {
+    --transform-skew-y: 12deg;
+  }
+
+  .xl\:hover\:-skew-y-12:hover {
+    --transform-skew-y: -12deg;
+  }
+
+  .xl\:hover\:-skew-y-6:hover {
+    --transform-skew-y: -6deg;
+  }
+
+  .xl\:hover\:-skew-y-3:hover {
+    --transform-skew-y: -3deg;
+  }
+
+  .xl\:focus\:skew-x-0:focus {
+    --transform-skew-x: 0;
+  }
+
+  .xl\:focus\:skew-x-3:focus {
+    --transform-skew-x: 3deg;
+  }
+
+  .xl\:focus\:skew-x-6:focus {
+    --transform-skew-x: 6deg;
+  }
+
+  .xl\:focus\:skew-x-12:focus {
+    --transform-skew-x: 12deg;
+  }
+
+  .xl\:focus\:-skew-x-12:focus {
+    --transform-skew-x: -12deg;
+  }
+
+  .xl\:focus\:-skew-x-6:focus {
+    --transform-skew-x: -6deg;
+  }
+
+  .xl\:focus\:-skew-x-3:focus {
+    --transform-skew-x: -3deg;
+  }
+
+  .xl\:focus\:skew-y-0:focus {
+    --transform-skew-y: 0;
+  }
+
+  .xl\:focus\:skew-y-3:focus {
+    --transform-skew-y: 3deg;
+  }
+
+  .xl\:focus\:skew-y-6:focus {
+    --transform-skew-y: 6deg;
+  }
+
+  .xl\:focus\:skew-y-12:focus {
+    --transform-skew-y: 12deg;
+  }
+
+  .xl\:focus\:-skew-y-12:focus {
+    --transform-skew-y: -12deg;
+  }
+
+  .xl\:focus\:-skew-y-6:focus {
+    --transform-skew-y: -6deg;
+  }
+
+  .xl\:focus\:-skew-y-3:focus {
+    --transform-skew-y: -3deg;
+  }
+
   .xl\:transition-none {
     transition-property: none;
   }
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index ac1ee14e4..6c093f915 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -524,7 +524,15 @@ module.exports = {
       '1/2': '50%',
       full: '100%',
     }),
-    skew: {},
+    skew: {
+      '-12': '-12deg',
+      '-6': '-6deg',
+      '-3': '-3deg',
+      '0': '0',
+      '3': '3deg',
+      '6': '6deg',
+      '12': '12deg',
+    },
     transitionProperty: {
       none: 'none',
       all: 'all',