Repository: tailwindlabs/tailwindcss (ts)

Issue:
missing Keyframe css for animations if @tailwind base is missing
Just upgraded to 1.6.0 and the animation css is generated but not the matching keyframe css - this is for the default animations and any custom ones I create.  This is the case with a blank config file.  

I have used everything else fine with no @tailwind base; instead using my own smaller reset css. 



Pull request:
Add keyframes as utilities instead of base
This PR updates the animation plugin to add the keyframes rules to the "utilities" layer rather than the "base" layer. Sounds a little bit weird until you realize that doing it any other way means you need `@tailwind base` in your CSS for animations to work, which feels wrong. You should be able to use our animations using just the "utilities" layer.

Fixes #2103.

Patch:
diff --git a/src/plugins/animation.js b/src/plugins/animation.js
index 50ad186d..75c7075a 100644
--- a/src/plugins/animation.js
+++ b/src/plugins/animation.js
@@ -1,14 +1,14 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addBase, addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, theme, variants }) {
     const keyframesConfig = theme('keyframes')
     const keyframesStyles = _.fromPairs(
       _.toPairs(keyframesConfig).map(([name, keyframes]) => {
         return [`@keyframes ${name}`, keyframes]
       })
     )
-    addBase(keyframesStyles)
+    addUtilities(keyframesStyles)
 
     const animationConfig = theme('animation')
     const utilities = _.fromPairs(


Test patch:
diff --git a/__tests__/fixtures/tailwind-output-ie11.css b/__tests__/fixtures/tailwind-output-ie11.css
index 7e06186a..6690bfbc 100644
--- a/__tests__/fixtures/tailwind-output-ie11.css
+++ b/__tests__/fixtures/tailwind-output-ie11.css
@@ -577,50 +577,6 @@ video {
   height: auto;
 }
 
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes ping {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  75%, 100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: .5;
-  }
-}
-
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8,0,1,1);
-  }
-
-  50% {
-    transform: translateY(0);
-    animation-timing-function: cubic-bezier(0,0,0.2,1);
-  }
-}
-
 .container {
   width: 100%;
 }
@@ -10994,6 +10950,50 @@ video {
   transition-delay: 1000ms;
 }
 
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ping {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
 .animate-none {
   animation: none;
 }
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index aa8399c3..80abbd57 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -577,50 +577,6 @@ video {
   height: auto;
 }
 
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes ping {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  75%, 100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: .5;
-  }
-}
-
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8,0,1,1);
-  }
-
-  50% {
-    transform: translateY(0);
-    animation-timing-function: cubic-bezier(0,0,0.2,1);
-  }
-}
-
 .container {
   width: 100%;
 }
@@ -14416,6 +14372,50 @@ video {
   transition-delay: 1000ms !important;
 }
 
+@keyframes spin {
+  from {
+    transform: rotate(0deg) !important;
+  }
+
+  to {
+    transform: rotate(360deg) !important;
+  }
+}
+
+@keyframes ping {
+  0% {
+    transform: scale(1) !important;
+    opacity: 1 !important;
+  }
+
+  75%, 100% {
+    transform: scale(2) !important;
+    opacity: 0 !important;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1 !important;
+  }
+
+  50% {
+    opacity: .5 !important;
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%) !important;
+    animation-timing-function: cubic-bezier(0.8,0,1,1) !important;
+  }
+
+  50% {
+    transform: translateY(0) !important;
+    animation-timing-function: cubic-bezier(0,0,0.2,1) !important;
+  }
+}
+
 .animate-none {
   animation: none !important;
 }
diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
index c3a64013..0d481f19 100644
--- a/__tests__/fixtures/tailwind-output-no-color-opacity.css
+++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css
@@ -577,50 +577,6 @@ video {
   height: auto;
 }
 
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes ping {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  75%, 100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: .5;
-  }
-}
-
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8,0,1,1);
-  }
-
-  50% {
-    transform: translateY(0);
-    animation-timing-function: cubic-bezier(0,0,0.2,1);
-  }
-}
-
 .container {
   width: 100%;
 }
@@ -11968,6 +11924,50 @@ video {
   transition-delay: 1000ms;
 }
 
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ping {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
 .animate-none {
   animation: none;
 }
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 6251b6d3..72d1eb12 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -577,50 +577,6 @@ video {
   height: auto;
 }
 
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes ping {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  75%, 100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: .5;
-  }
-}
-
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8,0,1,1);
-  }
-
-  50% {
-    transform: translateY(0);
-    animation-timing-function: cubic-bezier(0,0,0.2,1);
-  }
-}
-
 .container {
   width: 100%;
 }
@@ -14416,6 +14372,50 @@ video {
   transition-delay: 1000ms;
 }
 
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ping {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
 .animate-none {
   animation: none;
 }