Add @tailwindcss/turbopack loader

[timneutkens]

Summary

• add a new @tailwindcss/turbopack package based on the webpack loader
• document Turbopack installation, configuration, and loader options
• register the package in the lockfile, integration overrides, and changelog

Test plan

• pnpm --filter @tailwindcss/turbopack build
• pnpm exec prettier --check on changed files
• verify loader source and build configuration match @tailwindcss/webpack byte-for-byte
• pnpm pack --pack-destination /tmp

[greptile-apps]

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains; the current integration test exercises the documented Turbopack loader and content-change rebuild path, and all loader-level debug spans now use the Turbopack namespace.

_{Reviews (6): Last reviewed commit: "update changelog" | Re-trigger Greptile}

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

Walkthrough

Adds the @tailwindcss/turbopack package and loader implementation. Configures CommonJS and ESM builds, package exports, dependency overrides, documentation, and a changelog entry. Adds an integration test that verifies Tailwind CSS output and development rebuilds in a Next.js Turbopack project.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely identifies the new @tailwindcss/turbopack loader, which is the main change.
Description check	✅ Passed	The description accurately summarizes the new package, documentation, registration updates, and planned validation steps.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 3

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 5d970c0e-53be-484b-866c-fd1ee361313d

📥 Commits

Reviewing files that changed from the base of the PR and between 6de87c6 and afac0af.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (8)

• CHANGELOG.md
• integrations/utils.ts
• packages/@tailwindcss-turbopack/README.md
• packages/@tailwindcss-turbopack/package.json
• packages/@tailwindcss-turbopack/src/index.cts
• packages/@tailwindcss-turbopack/src/index.ts
• packages/@tailwindcss-turbopack/tsconfig.json
• packages/@tailwindcss-turbopack/tsup.config.ts

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 54473c87-c473-46a0-96a5-5352ae281455

📥 Commits

Reviewing files that changed from the base of the PR and between 257dedc and fd65315.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (9)

• CHANGELOG.md
• integrations/turbopack/loader.test.ts
• integrations/utils.ts
• packages/@tailwindcss-turbopack/README.md
• packages/@tailwindcss-turbopack/package.json
• packages/@tailwindcss-turbopack/src/index.cts
• packages/@tailwindcss-turbopack/src/index.ts
• packages/@tailwindcss-turbopack/tsconfig.json
• packages/@tailwindcss-turbopack/tsup.config.ts

🚧 Files skipped from review as they are similar to previous changes (7)

• integrations/utils.ts
• packages/@tailwindcss-turbopack/src/index.cts
• packages/@tailwindcss-turbopack/tsup.config.ts
• CHANGELOG.md
• packages/@tailwindcss-turbopack/tsconfig.json
• packages/@tailwindcss-turbopack/README.md
• packages/@tailwindcss-turbopack/package.json

[coderabbitai]

🩺 Stability & Availability | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Instrumentation.end throw behavior and report() auto-end
fd -a 'instrumentation.ts$' packages | xargs rg -n -C4 'Mismatched timer label|Auto end any pending timers'

# Compare the catch blocks of both loaders
fd -a 'index.ts$' packages/@tailwindcss-webpack packages/@tailwindcss-turbopack \
  | xargs rg -n -C6 'catch \(error\)'

Repository: tailwindlabs/tailwindcss

Length of output: 4636

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== Files =="
fd -a 'index.ts$|instrumentation.ts$' packages | sed 's#^\./##'

echo "== Turbopack index outline/section =="
wc -l packages/@tailwindcss-turbopack/src/index.ts
sed -n '1,320p' packages/@tailwindcss-turbopack/src/index.ts

echo "== Webpack index catch section =="
sed -n '80,305p' packages/@tailwindcss-webpack/src/index.ts

echo "== Instrumentation implementation =="
sed -n '1,140p' packages/@tailwindcss-node/src/instrumentation.ts

echo "== Call sites for Instrumentation / DEBUG / report =="
rg -n -C2 'Instrumentation|DEBUG|using I|\\breport\\(' packages/@tailwindcss-turbopack/packages/@tailwindcss-webpack 2>/dev/null || rg -n -C2 'Instrumentation|DEBUG|using I|\\breport\\(' packages/@tailwindcss-turbopack/src packages/@tailwindcss-webpack/src packages/@tailwindcss-node/src

Repository: tailwindlabs/tailwindcss

Length of output: 21120

---

Remove the explicit I.end() from the error path.

When DEBUG is enabled, this loader can throw from an inner I.start(...) path, then call I.end() with the outer loader label. Instrumentation.end() validates timer stack order and throws before callback(error) runs, so the loader promise rejects without reporting the CSS error. The using I declaration restores this behavior by calling report(), which auto-ends pending timers.

[RobinMalfait]

Thanks!