Don't error on @apply with extra whitespace (#13144)

* Don't crash on @apply with extra whitespace

* Update changelog

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Don't error on `@apply` with leading/trailing whitespace ([#13144](https://github.com/tailwindlabs/tailwindcss/pull/13144))
+
 ## [4.0.0-alpha.6] - 2024-03-07
 
 ### Fixed

packages/tailwindcss/src/index.test.ts

@@ -288,6 +288,22 @@ describe('@apply', () => {
       `[Error: Cannot apply unknown utility class: hocus:bg-red-500]`,
     )
   })
+
+  it('should not error with trailing whitespace', () => {
+    expect(
+      compileCss(`
+        @tailwind utilities;
+
+        .foo {
+          @apply flex ;
+        }
+      `),
+    ).toMatchInlineSnapshot(`
+      ".foo {
+        display: flex;
+      }"
+    `)
+  })
 })
 
 describe('arbitrary variants', () => {

packages/tailwindcss/src/index.ts

@@ -115,6 +115,7 @@ export function compile(css: string, rawCandidates: string[]) {
       if (node.kind === 'rule' && node.selector[0] === '@' && node.selector.startsWith('@apply')) {
         let candidates = node.selector
           .slice(7 /* Ignore `@apply ` when parsing the selector */)
+          .trim()
           .split(/\s+/g)
 
         // Replace the `@apply` rule with the actual utility classes