Improve compatibility with @tailwindcss/typography and @tailwindcss/forms

CHANGELOG.md

@@ -12,6 +12,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add support for `addBase` plugins using the `@plugin` directive ([#14172](https://github.com/tailwindlabs/tailwindcss/pull/14172))
 - Add support for the `tailwindcss/plugin` export ([#14173](https://github.com/tailwindlabs/tailwindcss/pull/14173))
 - Add support for the `theme()` function in plugins ([#14207](https://github.com/tailwindlabs/tailwindcss/pull/14207))
+- Add support for `addComponents`, `matchComponents`, `prefix` plugin APIs ([#14221](https://github.com/tailwindlabs/tailwindcss/pull/14221))
+- Add support for `tailwindcss/colors` and `tailwindcss/defaultTheme` exports for use with plugins ([#14221](https://github.com/tailwindlabs/tailwindcss/pull/14221))
+- Add support for the `@tailwindcss/typography` and `@tailwindcss/forms` plugins ([#14221](https://github.com/tailwindlabs/tailwindcss/pull/14221))
 
 ### Fixed
 

integrations/cli/plugins.test.ts

@@ -0,0 +1,78 @@
+import { candidate, css, html, json, test } from '../utils'
+
+test(
+  'builds the typography plugin utilities',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "@tailwindcss/typography": "^0.5.14",
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/cli": "workspace:^"
+          }
+        }
+      `,
+      'index.html': html`
+        <div className="prose">
+          <h1>Headline</h1>
+          <p>
+            Until now, trying to style an article, document, or blog post with Tailwind has been a
+            tedious task that required a keen eye for typography and a lot of complex custom CSS.
+          </p>
+        </div>
+      `,
+      'src/index.css': css`
+        @import 'tailwindcss';
+        @plugin '@tailwindcss/typography';
+      `,
+    },
+  },
+  async ({ fs, exec }) => {
+    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
+
+    await fs.expectFileToContain('dist/out.css', [
+      candidate`prose`,
+      ':where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))',
+      ':where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *))',
+    ])
+  },
+)
+
+test(
+  'builds the forms plugin utilities',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "@tailwindcss/forms": "^0.5.7",
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/cli": "workspace:^"
+          }
+        }
+      `,
+      'index.html': html`
+        <input type="text" class="form-input" />
+        <textarea class="form-textarea"></textarea>
+      `,
+      'src/index.css': css`
+        @import 'tailwindcss';
+        @plugin '@tailwindcss/forms';
+      `,
+    },
+  },
+  async ({ fs, exec }) => {
+    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
+
+    await fs.expectFileToContain('dist/out.css', [
+      //
+      candidate`form-input`,
+      candidate`form-textarea`,
+    ])
+    await fs.expectFileNotToContain('dist/out.css', [
+      //
+      candidate`form-radio`,
+    ])
+  },
+)

integrations/utils.ts

@@ -38,6 +38,7 @@ interface TestContext {
     read(filePath: string): Promise<string>
     glob(pattern: string): Promise<[string, string][]>
     expectFileToContain(filePath: string, contents: string | string[]): Promise<void>
+    expectFileNotToContain(filePath: string, contents: string | string[]): Promise<void>
   }
 }
 type TestCallback = (context: TestContext) => Promise<void> | void
@@ -289,9 +290,21 @@ export function test(
               }
             })
           },
+          async expectFileNotToContain(filePath, contents) {
+            return retryAssertion(async () => {
+              let fileContent = await this.read(filePath)
+              for (let content of contents) {
+                expect(fileContent).not.toContain(content)
+              }
+            })
+          },
         },
       } satisfies TestContext
 
+      config.fs['.gitignore'] ??= txt`
+        node_modules/
+      `
+
       for (let [filename, content] of Object.entries(config.fs)) {
         await context.fs.write(filename, content)
       }

packages/tailwindcss/package.json

@@ -23,6 +23,14 @@
       "require": "./dist/lib.js",
       "import": "./src/index.ts"
     },
+    "./colors": {
+      "require": "./src/compat/colors.cts",
+      "import": "./src/compat/colors.ts"
+    },
+    "./defaultTheme": {
+      "require": "./src/compat/default-theme.cts",
+      "import": "./src/compat/default-theme.ts"
+    },
     "./plugin": {
       "require": "./src/plugin.cts",
       "import": "./src/plugin.ts"
@@ -49,7 +57,15 @@
       },
       "./plugin": {
         "require": "./dist/plugin.js",
-        "import": "./src/plugin.mjs"
+        "import": "./dist/plugin.mjs"
+      },
+      "./defaultTheme": {
+        "require": "./dist/default-theme.js",
+        "import": "./dist/default-theme.mjs"
+      },
+      "./colors": {
+        "require": "./dist/colors.js",
+        "import": "./dist/colors.mjs"
       },
       "./package.json": "./package.json",
       "./index.css": "./index.css",

packages/tailwindcss/src/compat/colors.cts

@@ -0,0 +1 @@
+module.exports = require('./colors.ts').default