From 5df5daa76c883702438172193105cdf5592599e4 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 10 Jan 2025 13:39:00 +0100
Subject: [PATCH] Add missing `main` field for `@tailwindcss/browser` (#15594)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR adds a `main` and `browser` field for the `@tailwindcss/browser`
package.

In the package, we do have the `exports` field setup, which is an
alternative to the `main` field according to the docs:

> The "exports" provides a modern alternative to "main" …
>
> —
https://docs.npmjs.com/cli/v10/configuring-npm/package-json?v=true#exports

However, if you look at the unpkg link:
https://unpkg.com/@tailwindcss/browser, it tries to load the `index.js`
file. This is probably a bug in the unpkg resolver.

That said, if you look at other CDNs such as esm.sh, it does resolve
correctly: https://esm.sh/@tailwindcss/browser

According to the npm docs:

> If `main` is not set, it defaults to `index.js` in the package's root
folder.
>
> —
https://docs.npmjs.com/cli/v10/configuring-npm/package-json?v=true#main

This explains why unpkg is trying to load the `index.js` file.


Additionally, the npm docs also mention the `browser` field:

> If your module is meant to be used client-side the browser field
should be used instead of the main field. This is helpful to hint users
that it might rely on primitives that aren't available in Node.js
modules. (e.g. window)
>
> —
https://docs.npmjs.com/cli/v10/configuring-npm/package-json?v=true#browser

So this PR also adds that field just to be sure.
---
 CHANGELOG.md                               | 4 +++-
 packages/@tailwindcss-browser/package.json | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 52bda222d13a..1acd15b57212 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Add missing `main` and `browser` fields for `@tailwindcss/browser` ([#15594](https://github.com/tailwindlabs/tailwindcss/pull/15594))
 
 ## [4.0.0-beta.9] - 2025-01-09
 
diff --git a/packages/@tailwindcss-browser/package.json b/packages/@tailwindcss-browser/package.json
index ae8aa5a35f1e..bce497e61b97 100644
--- a/packages/@tailwindcss-browser/package.json
+++ b/packages/@tailwindcss-browser/package.json
@@ -3,6 +3,8 @@
   "version": "4.0.0-beta.9",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
+  "main": "./dist/index.mjs",
+  "browser": "./dist/index.mjs",
   "repository": {
     "type": "git",
     "url": "https://github.com/tailwindlabs/tailwindcss.git",