diff --git a/CHANGELOG.md b/CHANGELOG.md index c67efe3e8..745f31cf2 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 521841cbe..cf7025102 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/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', () => { diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index 59fe7a21c..d066a5a1f 100644 --- a/packages/tailwindcss/src/index.ts +++ b/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