diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js
--- a/src/lib/generateRules.js
+++ b/src/lib/generateRules.js
@@ -118,10 +118,20 @@ function applyImportant(matches, classCandidate) {
 
   let result = []
 
+  function isInKeyframes(rule) {
+    return rule.parent && rule.parent.type === 'atrule' && rule.parent.name === 'keyframes'
+  }
+
   for (let [meta, rule] of matches) {
     let container = postcss.root({ nodes: [rule.clone()] })
 
     container.walkRules((r) => {
+      // Declarations inside keyframes cannot be marked as important
+      // They will be ignored by the browser
+      if (isInKeyframes(r)) {
+        return
+      }
+
       let ast = selectorParser().astSync(r.selector)
 
       // Remove extraneous selectors that do not include the base candidate

diff --git a/tests/important-modifier.test.js b/tests/important-modifier.test.js
--- a/tests/important-modifier.test.js
+++ b/tests/important-modifier.test.js
@@ -147,3 +147,32 @@ test('the important modifier works on utilities using :where()', () => {
     `)
   })
 })
+
+test('the important modifier does not break keyframes', () => {
+  let config = {
+    content: [
+      {
+        raw: html` <div class="!animate-pulse"></div> `,
+      },
+    ],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      @keyframes pulse {
+        50% {
+          opacity: 0.5;
+        }
+      }
+
+      .\!animate-pulse {
+        animation: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite pulse !important;
+      }
+    `)
+  })
+})

important modifier on animation breaks keyframes
<!-- Please provide all of the information requested below. We're a small team and without all of this information it's not possible for us to help and your bug report will be closed. -->

**What version of Tailwind CSS are you using?**

v3.4.0

**What build tool (or framework if it abstracts the build tool) are you using?**

postcss 8.4.32

**What version of Node.js are you using?**

v21.4.0

**What browser are you using?**

Chrome

**What operating system are you using?**

macOS

**Reproduction URL**

https://play.tailwindcss.com/4mir5NtQdV

**Describe your issue**

If you use the !important modifier for animations, the keyframe steps of the animation are removed (and the animation breaks). You can also see this in tailwind intellisense.

![CleanShot 2023-12-19 at 23 02 29@2x](https://github.com/tailwindlabs/tailwindcss/assets/2500670/f2079572-00a0-4825-a79f-2e4d7015eeed)


tests/important-modifier.test.js