Make @apply treat utilities as not important unless they have a !

Author: thecrypticace

packages/tailwindcss/src/apply.ts

@@ -176,6 +176,7 @@ export function substituteAtApply(ast: AstNode[], designSystem: DesignSystem) {
         // with.
         let candidates = Object.keys(candidateOffsets)
         let compiled = compileCandidates(candidates, designSystem, {
+          respectImportant: false,
           onInvalidCandidate: (candidate) => {
             // When using prefix, make sure prefix is used in candidate
             if (designSystem.theme.prefix && !candidate.startsWith(designSystem.theme.prefix)) {

packages/tailwindcss/src/index.test.ts

@@ -777,6 +777,41 @@ describe('@apply', () => {
       }"
     `)
   })
+
+  // https://github.com/tailwindlabs/tailwindcss/issues/18400
+  it('should ignore the design systems `important` flag when using @apply', async () => {
+    expect(
+      await compileCss(
+        css`
+          @import 'tailwindcss/utilities' important;
+          .flex-explicitly-important {
+            @apply flex!;
+          }
+          .flex-not-important {
+            @apply flex;
+          }
+        `,
+        ['flex'],
+        {
+          async loadStylesheet(_, base) {
+            return {
+              content: '@tailwind utilities;',
+              base,
+              path: '',
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      ".flex, .flex-explicitly-important {
+        display: flex !important;
+      }
+
+      .flex-not-important {
+        display: flex;
+      }"
+    `)
+  })
 })
 
 describe('arbitrary variants', () => {