<script language="JavaScript">
<!--
function _AN_global_var_init(){
	_AN_this_url = "/prx/000/";
	_AN_base_scheme = "https";
	_AN_base_host = "https://github.com";
	_AN_base_path = "https://github.com/tailwindlabs/tailwindcss/compare/";
	_AN_encode_urls = 0;
	_AN_mpo = 1;
	_AN_md = 0;
	_AN_rel_urls = 1;
	_AN_nav_switch = 0;
	_AN_nav_allowurl = 1;
	_AN_nav_override = 0;
	_AN_has_iframe = 0;
	_AN_dbg_flags = null;
	_AN_nav_use_aaa = 1;
	_AN_expires_pass = 0;
	_AN_wrap_evthandlers = 0;
	_AN_rewrite_param_exact = 0;
	_AN_obj_params = {};
} 
_AN_global_var_init();
//-->
</script>
<script language="JavaScript" src="/prx/001/http/localh/an_util.js"></script>
<script language="JavaScript" src="/prx/001/http/localh/NSLib.js"></script>

From a785c93b54c770b65364a8c781761dd97ac684d5 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 29 Mar 2023 15:32:37 +0200
Subject: [PATCH 1/5] Try resolving `config.default` before `config` to ensure
 the config file is resolved correctly (#10898)

* try to use `config.default` before using `config`

* update changelog

* add quick `SHOW_OUTPUT` toggle for integration tests

Setting this to `true` shows the output of the executed commands.

* add integration tests for `tailwind.config.ts` and `tailwind.config.js` with ESM syntax
---
 CHANGELOG.md                                  |   4 +-
 integrations/execute.js                       |   8 ++
 integrations/parcel/tests/integration.test.js | 133 +++++++++++++++++-
 integrations/rollup/tests/integration.test.js | 116 ++++++++++++++-
 .../tailwindcss-cli/tests/integration.test.js | 116 ++++++++++++++-
 integrations/vite/tests/integration.test.js   | 112 ++++++++++++++-
 .../webpack-4/tests/integration.test.js       | 117 ++++++++++++++-
 .../webpack-5/tests/integration.test.js       | 117 ++++++++++++++-
 src/lib/load-config.ts                        |  14 +-
 9 files changed, 719 insertions(+), 18 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 879ed210eea2..270fc089d6e8 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
+
+- Try resolving `config.default` before `config` to ensure the config file is resolved correctly ([#10898](https://github.com/tailwindlabs/tailwindcss/pull/10898))
 
 ## [3.3.0] - 2023-03-27
 
diff --git a/integrations/execute.js b/integrations/execute.js
index f5ab2131804a..6c5f2036327d 100644
--- a/integrations/execute.js
+++ b/integrations/execute.js
@@ -3,6 +3,8 @@ let path = require('path')
 let { spawn } = require('child_process')
 let resolveToolRoot = require('./resolve-tool-root')
 
+let SHOW_OUTPUT = false
+
 let runningProcessess = []
 
 afterEach(() => {
@@ -92,6 +94,9 @@ module.exports = function $(command, options = {}) {
     let combined = ''
 
     child.stdout.on('data', (data) => {
+      if (SHOW_OUTPUT) {
+        console.log(data.toString())
+      }
       stdoutMessages.push(data.toString())
       notifyNextStdoutActor()
       stdout += data
@@ -99,6 +104,9 @@ module.exports = function $(command, options = {}) {
     })
 
     child.stderr.on('data', (data) => {
+      if (SHOW_OUTPUT) {
+        console.error(data.toString())
+      }
       stderrMessages.push(data.toString())
       notifyNextStderrActor()
       stderr += data
diff --git a/integrations/parcel/tests/integration.test.js b/integrations/parcel/tests/integration.test.js
index 0fc539f37eec..55e7f83a38b0 100644
--- a/integrations/parcel/tests/integration.test.js
+++ b/integrations/parcel/tests/integration.test.js
@@ -3,11 +3,12 @@ let { css, html, javascript } = require('../../syntax')
 let { env } = require('../../../lib/lib/sharedState')
 
 let {
-  readOutputFile,
   appendToInputFile,
-  writeInputFile,
-  waitForOutputFileCreation,
+  readOutputFile,
+  removeFile,
   waitForOutputFileChange,
+  waitForOutputFileCreation,
+  writeInputFile,
 } = require('../../io')({ output: 'dist', input: 'src' })
 
 describe('static build', () => {
@@ -32,6 +33,132 @@ describe('static build', () => {
       `
     )
   })
+
+  it('can use a tailwind.config.js configuration file with ESM syntax', async () => {
+    await removeFile('tailwind.config.js')
+    await writeInputFile(
+      'index.html',
+      html`
+        <link rel="stylesheet" href="/prx/000/https/github.com/tailwindlabs/tailwindcss/compare/index.css" />
+        <div class="bg-primary"></div>
+      `
+    )
+    await writeInputFile(
+      'index.css',
+      css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `
+    )
+    await writeInputFile(
+      '../tailwind.config.js',
+      javascript`
+        export default {
+          content: ['./src/index.html'],
+          theme: {
+            extend: {
+              colors: {
+                primary: 'black',
+              },
+            },
+          },
+          corePlugins: {
+            preflight: false,
+          },
+        }
+      `
+    )
+
+    await $('parcel build ./src/index.html --no-cache', {
+      env: { NODE_ENV: 'production' },
+    })
+
+    if (!env.OXIDE) {
+      expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(
+        css`
+          .bg-primary {
+            --tw-bg-opacity: 1;
+            background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          }
+        `
+      )
+    }
+
+    if (env.OXIDE) {
+      expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(
+        css`
+          .bg-primary {
+            background-color: black;
+          }
+        `
+      )
+    }
+  })
+
+  it('can use a tailwind.config.ts configuration file', async () => {
+    await removeFile('tailwind.config.js')
+    await writeInputFile(
+      'index.html',
+      html`
+        <link rel="stylesheet" href="/prx/000/https/github.com/tailwindlabs/tailwindcss/compare/index.css" />
+        <div class="bg-primary"></div>
+      `
+    )
+    await writeInputFile(
+      'index.css',
+      css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `
+    )
+    await writeInputFile(
+      '../tailwind.config.ts',
+      javascript`
+        import type { Config } from 'tailwindcss'
+
+        export default {
+          content: ['./src/index.html'],
+          theme: {
+            extend: {
+              colors: {
+                primary: 'black',
+              },
+            },
+          },
+          corePlugins: {
+            preflight: false,
+          },
+        } satisfies Config
+      `
+    )
+
+    await $('parcel build ./src/index.html --no-cache', {
+      env: { NODE_ENV: 'production' },
+    })
+
+    if (!env.OXIDE) {
+      expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(
+        css`
+          .bg-primary {
+            --tw-bg-opacity: 1;
+            background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          }
+        `
+      )
+    }
+
+    if (env.OXIDE) {
+      expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(
+        css`
+          .bg-primary {
+            background-color: black;
+          }
+        `
+      )
+    }
+  })
 })
 
 describe('watcher', () => {
diff --git a/integrations/rollup/tests/integration.test.js b/integrations/rollup/tests/integration.test.js
index 1daea888a875..dbbfcc8d11f1 100644
--- a/integrations/rollup/tests/integration.test.js
+++ b/integrations/rollup/tests/integration.test.js
@@ -2,7 +2,7 @@ let $ = require('../../execute')
 let { css, html, javascript } = require('../../syntax')
 let { env } = require('../../../lib/lib/sharedState')
 
-let { readOutputFile, appendToInputFile, writeInputFile } = require('../../io')({
+let { readOutputFile, appendToInputFile, writeInputFile, removeFile } = require('../../io')({
   output: 'dist',
   input: 'src',
 })
@@ -27,6 +27,120 @@ describe('static build', () => {
       `
     )
   })
+
+  it('can use a tailwind.config.js configuration file with ESM syntax', async () => {
+    await removeFile('tailwind.config.js')
+    await writeInputFile('index.html', html`<div class="bg-primary"></div>`)
+    await writeInputFile(
+      'index.css',
+      css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `
+    )
+    await writeInputFile(
+      '../tailwind.config.js',
+      javascript`
+        export default {
+          content: ['./src/index.html'],
+          theme: {
+            extend: {
+              colors: {
+                primary: 'black',
+              },
+            },
+          },
+          corePlugins: {
+            preflight: false,
+          },
+        }
+      `
+    )
+
+    await $('rollup -c', {
+      env: { NODE_ENV: 'production' },
+    })
+
+    if (!env.OXIDE) {
+      expect(await readOutputFile('index.css')).toIncludeCss(
+        css`
+          .bg-primary {
+            --tw-bg-opacity: 1;
+            background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          }
+        `
+      )
+    }
+
+    if (env.OXIDE) {
+      expect(await readOutputFile('index.css')).toIncludeCss(
+        css`
+          .bg-primary {
+            background-color: black;
+          }
+        `
+      )
+    }
+  })
+
+  it('can use a tailwind.config.ts configuration file', async () => {
+    await removeFile('tailwind.config.js')
+    await writeInputFile('index.html', html`<div class="bg-primary"></div>`)
+    await writeInputFile(
+      'index.css',
+      css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `
+    )
+    await writeInputFile(
+      '../tailwind.config.ts',
+      javascript`
+        import type { Config } from 'tailwindcss'
+
+        export default {
+          content: ['./src/index.html'],
+          theme: {
+            extend: {
+              colors: {
+                primary: 'black',
+              },
+            },
+          },
+          corePlugins: {
+            preflight: false,
+          },
+        } satisfies Config
+      `
+    )
+
+    await $('rollup -c', {
+      env: { NODE_ENV: 'production' },
+    })
+
+    if (!env.OXIDE) {
+      expect(await readOutputFile('index.css')).toIncludeCss(
+        css`
+          .bg-primary {
+            --tw-bg-opacity: 1;
+            background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          }
+        `
+      )
+    }
+
+    if (env.OXIDE) {
+      expect(await readOutputFile('index.css')).toIncludeCss(
+        css`
+          .bg-primary {
+            background-color: black;
+          }
+        `
+      )
+    }
+  })
 })
 
 describe('watcher', () => {
diff --git a/integrations/tailwindcss-cli/tests/integration.test.js b/integrations/tailwindcss-cli/tests/integration.test.js
index ff8db20b8a2d..6efa9fdf5e44 100644
--- a/integrations/tailwindcss-cli/tests/integration.test.js
+++ b/integrations/tailwindcss-cli/tests/integration.test.js
@@ -3,7 +3,7 @@ let $ = require('../../execute')
 let { css, html, javascript } = require('../../syntax')
 let { env } = require('../../../lib/lib/sharedState')
 
-let { readOutputFile, appendToInputFile, writeInputFile } = require('../../io')({
+let { readOutputFile, appendToInputFile, writeInputFile, removeFile } = require('../../io')({
   output: 'dist',
   input: 'src',
 })
@@ -111,6 +111,120 @@ describe('static build', () => {
     }
   })
 
+  it('can use a tailwind.config.js configuration file with ESM syntax', async () => {
+    await removeFile('tailwind.config.js')
+    await writeInputFile('index.html', html`<div class="bg-primary"></div>`)
+    await writeInputFile(
+      'index.css',
+      css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `
+    )
+    await writeInputFile(
+      '../tailwind.config.js',
+      javascript`
+        export default {
+          content: ['./src/index.html'],
+          theme: {
+            extend: {
+              colors: {
+                primary: 'black',
+              },
+            },
+          },
+          corePlugins: {
+            preflight: false,
+          },
+        }
+      `
+    )
+
+    await $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css', {
+      env: { NODE_ENV: 'production' },
+    })
+
+    if (!env.OXIDE) {
+      expect(await readOutputFile('main.css')).toIncludeCss(
+        css`
+          .bg-primary {
+            --tw-bg-opacity: 1;
+            background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          }
+        `
+      )
+    }
+
+    if (env.OXIDE) {
+      expect(await readOutputFile('main.css')).toIncludeCss(
+        css`
+          .bg-primary {
+            background-color: black;
+          }
+        `
+      )
+    }
+  })
+
+  it('can use a tailwind.config.ts configuration file', async () => {
+    await removeFile('tailwind.config.js')
+    await writeInputFile('index.html', html`<div class="bg-primary"></div>`)
+    await writeInputFile(
+      'index.css',
+      css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `
+    )
+    await writeInputFile(
+      '../tailwind.config.ts',
+      javascript`
+        import type { Config } from 'tailwindcss'
+
+        export default {
+          content: ['./src/index.html'],
+          theme: {
+            extend: {
+              colors: {
+                primary: 'black',
+              },
+            },
+          },
+          corePlugins: {
+            preflight: false,
+          },
+        } satisfies Config
+      `
+    )
+
+    await $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css', {
+      env: { NODE_ENV: 'production' },
+    })
+
+    if (!env.OXIDE) {
+      expect(await readOutputFile('main.css')).toIncludeCss(
+        css`
+          .bg-primary {
+            --tw-bg-opacity: 1;
+            background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          }
+        `
+      )
+    }
+
+    if (env.OXIDE) {
+      expect(await readOutputFile('main.css')).toIncludeCss(
+        css`
+          .bg-primary {
+            background-color: black;
+          }
+        `
+      )
+    }
+  })
+
   it('can read from a config file from an @config directive', async () => {
     await writeInputFile('index.html', html`<div class="bg-yellow"></div>`)
     await writeInputFile(
diff --git a/integrations/vite/tests/integration.test.js b/integrations/vite/tests/integration.test.js
index 1e5cd2d3345e..a07a2a9a6efc 100644
--- a/integrations/vite/tests/integration.test.js
+++ b/integrations/vite/tests/integration.test.js
@@ -4,7 +4,7 @@ let $ = require('../../execute')
 let { css, html, javascript } = require('../../syntax')
 let { env } = require('../../../lib/lib/sharedState')
 
-let { readOutputFile, appendToInputFile, writeInputFile } = require('../../io')({
+let { readOutputFile, appendToInputFile, writeInputFile, removeFile } = require('../../io')({
   output: 'dist',
   input: '.',
 })
@@ -42,6 +42,116 @@ describe('static build', () => {
       `
     )
   })
+
+  it('can use a tailwind.config.js configuration file with ESM syntax', async () => {
+    await writeInputFile(
+      'index.html',
+      html`
+        <link rel="stylesheet" href="/prx/000/https/github.com/tailwindlabs/tailwindcss/compare/index.css" />
+        <div class="bg-primary"></div>
+      `
+    )
+    await removeFile('tailwind.config.js')
+    await writeInputFile(
+      'tailwind.config.js',
+      javascript`
+        export default {
+          content: ['index.html'],
+          theme: {
+            extend: {
+              colors: {
+                primary: 'black',
+              },
+            },
+          },
+          corePlugins: {
+            preflight: false,
+          },
+        }
+      `
+    )
+
+    await $('vite build', {
+      env: { NODE_ENV: 'production', NO_COLOR: '1' },
+    })
+
+    if (!env.OXIDE) {
+      expect(await readOutputFile(/index.\w+\.css$/)).toIncludeCss(
+        css`
+          .bg-primary {
+            --tw-bg-opacity: 1;
+            background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          }
+        `
+      )
+    }
+
+    if (env.OXIDE) {
+      expect(await readOutputFile(/index.\w+\.css$/)).toIncludeCss(
+        css`
+          .bg-primary {
+            background-color: black;
+          }
+        `
+      )
+    }
+  })
+
+  it('can use a tailwind.config.ts configuration file', async () => {
+    await writeInputFile(
+      'index.html',
+      html`
+        <link rel="stylesheet" href="/prx/000/https/github.com/tailwindlabs/tailwindcss/compare/index.css" />
+        <div class="bg-primary"></div>
+      `
+    )
+    await removeFile('tailwind.config.js')
+    await writeInputFile(
+      'tailwind.config.ts',
+      javascript`
+        import type { Config } from 'tailwindcss'
+
+        export default {
+          content: ['index.html'],
+          theme: {
+            extend: {
+              colors: {
+                primary: 'black',
+              },
+            },
+          },
+          corePlugins: {
+            preflight: false,
+          },
+        } satisfies Config
+      `
+    )
+
+    await $('vite build', {
+      env: { NODE_ENV: 'production', NO_COLOR: '1' },
+    })
+
+    if (!env.OXIDE) {
+      expect(await readOutputFile(/index.\w+\.css$/)).toIncludeCss(
+        css`
+          .bg-primary {
+            --tw-bg-opacity: 1;
+            background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          }
+        `
+      )
+    }
+
+    if (env.OXIDE) {
+      expect(await readOutputFile(/index.\w+\.css$/)).toIncludeCss(
+        css`
+          .bg-primary {
+            background-color: black;
+          }
+        `
+      )
+    }
+  })
 })
 
 describe('watcher', () => {
diff --git a/integrations/webpack-4/tests/integration.test.js b/integrations/webpack-4/tests/integration.test.js
index 6bbf3f879fcd..a666721bbdc1 100644
--- a/integrations/webpack-4/tests/integration.test.js
+++ b/integrations/webpack-4/tests/integration.test.js
@@ -3,11 +3,12 @@ let { css, html, javascript } = require('../../syntax')
 let { env } = require('../../../lib/lib/sharedState')
 
 let {
-  readOutputFile,
   appendToInputFile,
-  writeInputFile,
-  waitForOutputFileCreation,
+  readOutputFile,
+  removeFile,
   waitForOutputFileChange,
+  waitForOutputFileCreation,
+  writeInputFile,
 } = require('../../io')({ output: 'dist', input: 'src' })
 
 describe('static build', () => {
@@ -24,6 +25,116 @@ describe('static build', () => {
       `
     )
   })
+
+  it('can use a tailwind.config.js configuration file with ESM syntax', async () => {
+    await removeFile('tailwind.config.js')
+    await writeInputFile('index.html', html`<div class="bg-primary"></div>`)
+    await writeInputFile(
+      'index.css',
+      css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `
+    )
+    await writeInputFile(
+      '../tailwind.config.js',
+      javascript`
+        export default {
+          content: ['./src/index.html'],
+          theme: {
+            extend: {
+              colors: {
+                primary: 'black',
+              },
+            },
+          },
+          corePlugins: {
+            preflight: false,
+          },
+        }
+      `
+    )
+
+    await $('webpack --mode=production')
+
+    if (!env.OXIDE) {
+      expect(await readOutputFile('main.css')).toIncludeCss(
+        css`
+          .bg-primary {
+            --tw-bg-opacity: 1;
+            background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          }
+        `
+      )
+    }
+
+    if (env.OXIDE) {
+      expect(await readOutputFile('main.css')).toIncludeCss(
+        css`
+          .bg-primary {
+            background-color: black;
+          }
+        `
+      )
+    }
+  })
+
+  it('can use a tailwind.config.ts configuration file', async () => {
+    await removeFile('tailwind.config.js')
+    await writeInputFile('index.html', html`<div class="bg-primary"></div>`)
+    await writeInputFile(
+      'index.css',
+      css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `
+    )
+    await writeInputFile(
+      '../tailwind.config.ts',
+      javascript`
+        import type { Config } from 'tailwindcss'
+
+        export default {
+          content: ['./src/index.html'],
+          theme: {
+            extend: {
+              colors: {
+                primary: 'black',
+              },
+            },
+          },
+          corePlugins: {
+            preflight: false,
+          },
+        } satisfies Config
+      `
+    )
+
+    await $('webpack --mode=production')
+
+    if (!env.OXIDE) {
+      expect(await readOutputFile('main.css')).toIncludeCss(
+        css`
+          .bg-primary {
+            --tw-bg-opacity: 1;
+            background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          }
+        `
+      )
+    }
+
+    if (env.OXIDE) {
+      expect(await readOutputFile('main.css')).toIncludeCss(
+        css`
+          .bg-primary {
+            background-color: black;
+          }
+        `
+      )
+    }
+  })
 })
 
 describe('watcher', () => {
diff --git a/integrations/webpack-5/tests/integration.test.js b/integrations/webpack-5/tests/integration.test.js
index fde0d60c5364..ae493fbdbb66 100644
--- a/integrations/webpack-5/tests/integration.test.js
+++ b/integrations/webpack-5/tests/integration.test.js
@@ -3,11 +3,12 @@ let { css, html, javascript } = require('../../syntax')
 let { env } = require('../../../lib/lib/sharedState')
 
 let {
-  readOutputFile,
   appendToInputFile,
-  writeInputFile,
-  waitForOutputFileCreation,
+  readOutputFile,
+  removeFile,
   waitForOutputFileChange,
+  waitForOutputFileCreation,
+  writeInputFile,
 } = require('../../io')({ output: 'dist', input: 'src' })
 
 describe('static build', () => {
@@ -24,6 +25,116 @@ describe('static build', () => {
       `
     )
   })
+
+  it('can use a tailwind.config.js configuration file with ESM syntax', async () => {
+    await removeFile('tailwind.config.js')
+    await writeInputFile('index.html', html`<div class="bg-primary"></div>`)
+    await writeInputFile(
+      'index.css',
+      css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `
+    )
+    await writeInputFile(
+      '../tailwind.config.js',
+      javascript`
+        export default {
+          content: ['./src/index.html'],
+          theme: {
+            extend: {
+              colors: {
+                primary: 'black',
+              },
+            },
+          },
+          corePlugins: {
+            preflight: false,
+          },
+        }
+      `
+    )
+
+    await $('webpack --mode=production')
+
+    if (!env.OXIDE) {
+      expect(await readOutputFile('main.css')).toIncludeCss(
+        css`
+          .bg-primary {
+            --tw-bg-opacity: 1;
+            background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          }
+        `
+      )
+    }
+
+    if (env.OXIDE) {
+      expect(await readOutputFile('main.css')).toIncludeCss(
+        css`
+          .bg-primary {
+            background-color: black;
+          }
+        `
+      )
+    }
+  })
+
+  it('can use a tailwind.config.ts configuration file', async () => {
+    await removeFile('tailwind.config.js')
+    await writeInputFile('index.html', html`<div class="bg-primary"></div>`)
+    await writeInputFile(
+      'index.css',
+      css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `
+    )
+    await writeInputFile(
+      '../tailwind.config.ts',
+      javascript`
+        import type { Config } from 'tailwindcss'
+
+        export default {
+          content: ['./src/index.html'],
+          theme: {
+            extend: {
+              colors: {
+                primary: 'black',
+              },
+            },
+          },
+          corePlugins: {
+            preflight: false,
+          },
+        } satisfies Config
+      `
+    )
+
+    await $('webpack --mode=production')
+
+    if (!env.OXIDE) {
+      expect(await readOutputFile('main.css')).toIncludeCss(
+        css`
+          .bg-primary {
+            --tw-bg-opacity: 1;
+            background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          }
+        `
+      )
+    }
+
+    if (env.OXIDE) {
+      expect(await readOutputFile('main.css')).toIncludeCss(
+        css`
+          .bg-primary {
+            background-color: black;
+          }
+        `
+      )
+    }
+  })
 })
 
 describe('watcher', () => {
diff --git a/src/lib/load-config.ts b/src/lib/load-config.ts
index 89ce3a368d0b..645e8e1d55c4 100644
--- a/src/lib/load-config.ts
+++ b/src/lib/load-config.ts
@@ -19,9 +19,13 @@ function lazyJiti() {
 }
 
 export function loadConfig(path: string): Config {
-  try {
-    return path ? require(path) : {}
-  } catch {
-    return lazyJiti()(path)
-  }
+  let config = (function () {
+    try {
+      return path ? require(path) : {}
+    } catch {
+      return lazyJiti()(path)
+    }
+  })()
+
+  return config.default ?? config
 }

From ff02420a6932310fa3d90eeca4bae477dfa4758c Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 29 Mar 2023 10:43:40 -0400
Subject: [PATCH 2/5] Pull pseudo elements outside of `:is` and `:has` when
 using `@apply`

---
 src/lib/expandApplyAtRules.js     | 12 ++++++
 src/util/formatVariantSelector.js | 53 +++++++++++++++++++----
 tests/apply.test.js               | 70 +++++++++++++++++++++++++++++++
 3 files changed, 126 insertions(+), 9 deletions(-)

diff --git a/src/lib/expandApplyAtRules.js b/src/lib/expandApplyAtRules.js
index cdcd0b5688c9..836e9ba86c22 100644
--- a/src/lib/expandApplyAtRules.js
+++ b/src/lib/expandApplyAtRules.js
@@ -4,6 +4,7 @@ import parser from 'postcss-selector-parser'
 import { resolveMatches } from './generateRules'
 import escapeClassName from '../util/escapeClassName'
 import { applyImportantSelector } from '../util/applyImportantSelector'
+import { collectPseudoElements, sortSelector } from '../util/formatVariantSelector.js'
 
 /** @typedef {Map<string, [any import postcss ).Rule>} ApplyCache */
 
@@ -562,6 +563,17 @@ function processApply(root, context, localCache) {
             rule.walkDecls((d) => {
               d.important = meta.important || important
             })
+
+            // Move pseudo elements to the end of the selector (if necessary)
+            let selector = parser().astSync(rule.selector)
+            selector.each((sel) => {
+              let [pseudoElements] = collectPseudoElements(sel, true, [':is', ':has'])
+              if (pseudoElements.length > 0) {
+                sel.nodes.push(...pseudoElements.sort(sortSelector))
+              }
+            })
+
+            rule.selector = selector.toString()
           })
         }
 
diff --git a/src/util/formatVariantSelector.js b/src/util/formatVariantSelector.js
index da5e2c78dfbc..062437061f9d 100644
--- a/src/util/formatVariantSelector.js
+++ b/src/util/formatVariantSelector.js
@@ -246,7 +246,7 @@ export function finalizeSelector(current, formats, { context, candidate, base })
 
   // Move pseudo elements to the end of the selector (if necessary)
   selector.each((sel) => {
-    let pseudoElements = collectPseudoElements(sel)
+    let [pseudoElements] = collectPseudoElements(sel)
     if (pseudoElements.length > 0) {
       sel.nodes.push(pseudoElements.sort(sortSelector))
     }
@@ -339,6 +339,17 @@ let pseudoElementExceptions = [
   '::-webkit-resizer',
 ]
 
+export function containsNode(selector, values) {
+  let found = false
+  selector.walk((node) => {
+    if (values.includes(node.value)) {
+      found = true
+      return false
+    }
+  })
+  return found
+}
+
 /**
  * This will make sure to move pseudo's to the correct spot (the end for
  * pseudo elements) because otherwise the selector will never work
@@ -351,23 +362,43 @@ let pseudoElementExceptions = [
  * `::before:hover` doesn't work, which means that we can make it work for you by flipping the order.
  *
  * @param {Selector} selector
+ * @param {boolean} force
+ * @param {string[]|null} safelist
  **/
-function collectPseudoElements(selector) {
+export function collectPseudoElements(selector, force = false, safelist = null) {
   /** @type {Node[]} */
   let nodes = []
+  let seenPseudoElement = null
+
+  if (safelist !== null && !containsNode(selector, safelist)) {
+    return [[], seenPseudoElement]
+  }
 
-  for (let node of selector.nodes) {
-    if (isPseudoElement(node)) {
+  for (let node of [...selector.nodes]) {
+    if (isPseudoElement(node, force)) {
       nodes.push(node)
       selector.removeChild(node)
+      seenPseudoElement = node.value
+    } else if (seenPseudoElement !== null) {
+      if (pseudoElementExceptions.includes(seenPseudoElement) && isPseudoClass(node, force)) {
+        nodes.push(node)
+        selector.removeChild(node)
+      } else {
+        seenPseudoElement = null
+      }
     }
 
     if (node?.nodes) {
-      nodes.push(...collectPseudoElements(node))
+      let [collected, seenPseudoElementInSelector] = collectPseudoElements(node, force)
+      if (seenPseudoElementInSelector) {
+        seenPseudoElement = seenPseudoElementInSelector
+      }
+
+      nodes.push(...collected)
     }
   }
 
-  return nodes
+  return [nodes, seenPseudoElement]
 }
 
 // This will make sure to move pseudo's to the correct spot (the end for
@@ -380,7 +411,7 @@ function collectPseudoElements(selector) {
 //
 // `::before:hover` doesn't work, which means that we can make it work
 // for you by flipping the order.
-function sortSelector(a, z) {
+export function sortSelector(a, z) {
   // Both nodes are non-pseudo's so we can safely ignore them and keep
   // them in the same order.
   if (a.type !== 'pseudo' && z.type !== 'pseudo') {
@@ -404,9 +435,13 @@ function sortSelector(a, z) {
   return isPseudoElement(a) - isPseudoElement(z)
 }
 
-function isPseudoElement(node) {
+function isPseudoElement(node, force = false) {
   if (node.type !== 'pseudo') return false
-  if (pseudoElementExceptions.includes(node.value)) return false
+  if (pseudoElementExceptions.includes(node.value) && !force) return false
 
   return node.value.startsWith('::') || pseudoElementsBC.includes(node.value)
 }
+
+function isPseudoClass(node, force) {
+  return node.type === 'pseudo' && !isPseudoElement(node, force)
+}
diff --git a/tests/apply.test.js b/tests/apply.test.js
index f7fab7d70938..0ab9ec17567f 100644
--- a/tests/apply.test.js
+++ b/tests/apply.test.js
@@ -2357,4 +2357,74 @@ crosscheck(({ stable, oxide }) => {
       `)
     })
   })
+
+  it('pseudo elements inside apply are moved outside of :is() or :has()', () => {
+    let config = {
+      darkMode: 'class',
+      content: [
+        {
+          raw: html` <div class="foo bar baz qux steve bob"></div> `,
+        },
+      ],
+    }
+
+    let input = css`
+      .foo::before {
+        @apply dark:bg-black/100;
+      }
+
+      .bar::before {
+        @apply rtl:dark:bg-black/100;
+      }
+
+      .baz::before {
+        @apply rtl:dark:hover:bg-black/100;
+      }
+
+      .qux::file-selector-button {
+        @apply rtl:dark:hover:bg-black/100;
+      }
+
+      .steve::before {
+        @apply rtl:hover:dark:bg-black/100;
+      }
+
+      .bob::file-selector-button {
+        @apply rtl:hover:dark:bg-black/100;
+      }
+
+      .foo::before {
+        @apply [:has([dir="rtl"]_&)]:hover:bg-black/100;
+      }
+
+      .bar::file-selector-button {
+        @apply [:has([dir="rtl"]_&)]:hover:bg-black/100;
+      }
+    `
+
+    return run(input, config).then((result) => {
+      expect(result.css).toMatchFormattedCss(css`
+        :is(.dark .foo)::before,
+        :is([dir='rtl'] :is(.dark .bar))::before,
+        :is([dir='rtl'] :is(.dark .baz:hover))::before {
+          background-color: #000;
+        }
+        :is([dir='rtl'] :is(.dark .qux))::file-selector-button:hover {
+          background-color: #000;
+        }
+        :is([dir='rtl'] :is(.dark .steve):hover):before {
+          background-color: #000;
+        }
+        :is([dir='rtl'] :is(.dark .bob))::file-selector-button:hover {
+          background-color: #000;
+        }
+        :has([dir='rtl'] .foo:hover):before {
+          background-color: #000;
+        }
+        :has([dir='rtl'] .bar)::file-selector-button:hover {
+          background-color: #000;
+        }
+      `)
+    })
+  })
 })

From 3dbfe4acbcb836ebc81b180e9f9cc2f2c3491295 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 29 Mar 2023 10:53:55 -0400
Subject: [PATCH 3/5] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 270fc089d6e8..1fc7165535cc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Try resolving `config.default` before `config` to ensure the config file is resolved correctly ([#10898](https://github.com/tailwindlabs/tailwindcss/pull/10898))
+- Pull pseudo elements outside of `:is` and `:has` when using `@apply` ([#10903](https://github.com/tailwindlabs/tailwindcss/pull/10903))
 
 ## [3.3.0] - 2023-03-27
 

From 8589ab89a2a9e57518d14cbbceec6a7b0a0f33e7 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 29 Mar 2023 11:39:14 -0400
Subject: [PATCH 4/5] Refactor

---
 src/lib/expandApplyAtRules.js     |  2 +-
 src/util/formatVariantSelector.js | 17 ++++++++++-------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/lib/expandApplyAtRules.js b/src/lib/expandApplyAtRules.js
index 836e9ba86c22..c6d53d80e29f 100644
--- a/src/lib/expandApplyAtRules.js
+++ b/src/lib/expandApplyAtRules.js
@@ -567,7 +567,7 @@ function processApply(root, context, localCache) {
             // Move pseudo elements to the end of the selector (if necessary)
             let selector = parser().astSync(rule.selector)
             selector.each((sel) => {
-              let [pseudoElements] = collectPseudoElements(sel, true, [':is', ':has'])
+              let [pseudoElements] = collectPseudoElements(sel)
               if (pseudoElements.length > 0) {
                 sel.nodes.push(...pseudoElements.sort(sortSelector))
               }
diff --git a/src/util/formatVariantSelector.js b/src/util/formatVariantSelector.js
index 062437061f9d..dd6584db1fcc 100644
--- a/src/util/formatVariantSelector.js
+++ b/src/util/formatVariantSelector.js
@@ -248,7 +248,7 @@ export function finalizeSelector(current, formats, { context, candidate, base })
   selector.each((sel) => {
     let [pseudoElements] = collectPseudoElements(sel)
     if (pseudoElements.length > 0) {
-      sel.nodes.push(pseudoElements.sort(sortSelector))
+      sel.nodes.push(...pseudoElements.sort(sortSelector))
     }
   })
 
@@ -365,15 +365,11 @@ export function containsNode(selector, values) {
  * @param {boolean} force
  * @param {string[]|null} safelist
  **/
-export function collectPseudoElements(selector, force = false, safelist = null) {
+export function collectPseudoElements(selector, force = false) {
   /** @type {Node[]} */
   let nodes = []
   let seenPseudoElement = null
 
-  if (safelist !== null && !containsNode(selector, safelist)) {
-    return [[], seenPseudoElement]
-  }
-
   for (let node of [...selector.nodes]) {
     if (isPseudoElement(node, force)) {
       nodes.push(node)
@@ -389,7 +385,14 @@ export function collectPseudoElements(selector, force = false, safelist = null)
     }
 
     if (node?.nodes) {
-      let [collected, seenPseudoElementInSelector] = collectPseudoElements(node, force)
+      let hasPseudoElementRestrictions =
+        node.type === 'pseudo' && (node.value === ':is' || node.value === ':has')
+
+      let [collected, seenPseudoElementInSelector] = collectPseudoElements(
+        node,
+        force || hasPseudoElementRestrictions
+      )
+
       if (seenPseudoElementInSelector) {
         seenPseudoElement = seenPseudoElementInSelector
       }

From 7377102e140fa7e606b5031ff9cf69d559c67ca1 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 29 Mar 2023 11:39:28 -0400
Subject: [PATCH 5/5] Update important selector handling for :is and :has

---
 src/util/applyImportantSelector.js | 34 ++++++++++++++++++++----------
 tests/important-selector.test.js   |  7 ++++++
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/util/applyImportantSelector.js b/src/util/applyImportantSelector.js
index 69de63325c79..dbaf136cce20 100644
--- a/src/util/applyImportantSelector.js
+++ b/src/util/applyImportantSelector.js
@@ -1,19 +1,31 @@
 import { splitAtTopLevelOnly } from './splitAtTopLevelOnly'
+import parser from 'postcss-selector-parser'
+import { collectPseudoElements, sortSelector } from './formatVariantSelector.js'
 
 export function applyImportantSelector(selector, important) {
-  let matches = /^(.*?)(:before|:after|::[\w-]+)(\)*)$/g.exec(selector)
-  if (!matches) return `${important} ${wrapWithIs(selector)}`
+  let sel = parser().astSync(selector)
 
-  let [, before, pseudo, brackets] = matches
-  return `${important} ${wrapWithIs(before + brackets)}${pseudo}`
-}
+  sel.each((sel) => {
+    // Wrap with :is if it's not already wrapped
+    let isWrapped =
+      sel.nodes[0].type === 'pseudo' &&
+      sel.nodes[0].value === ':is' &&
+      sel.nodes.every((node) => node.type !== 'combinator')
 
-function wrapWithIs(selector) {
-  let parts = splitAtTopLevelOnly(selector, ' ')
+    if (!isWrapped) {
+      sel.nodes = [
+        parser.pseudo({
+          value: ':is',
+          nodes: [sel.clone()],
+        }),
+      ]
+    }
 
-  if (parts.length === 1 && parts[0].startsWith(':is(') && parts[0].endsWith(')')) {
-    return selector
-  }
+    let [pseudoElements] = collectPseudoElements(sel)
+    if (pseudoElements.length > 0) {
+      sel.nodes.push(...pseudoElements.sort(sortSelector))
+    }
+  })
 
-  return `:is(${selector})`
+  return `${important} ${sel.toString()}`
 }
diff --git a/tests/important-selector.test.js b/tests/important-selector.test.js
index 5c6515e43086..22edafb94dd1 100644
--- a/tests/important-selector.test.js
+++ b/tests/important-selector.test.js
@@ -21,6 +21,7 @@ crosscheck(({ stable, oxide }) => {
             <div class="group-hover:focus-within:text-left"></div>
             <div class="rtl:active:text-center"></div>
             <div class="dark:before:underline"></div>
+            <div class="hover:[&::file-selector-button]:rtl:dark:bg-black/100"></div>
           `,
         },
       ],
@@ -155,6 +156,12 @@ crosscheck(({ stable, oxide }) => {
             text-align: right;
           }
         }
+        #app
+          :is(
+            [dir='rtl'] :is(.dark .hover\:\[\&\:\:file-selector-button\]\:rtl\:dark\:bg-black\/100)
+          )::file-selector-button:hover {
+          background-color: #000;
+        }
       `)
     })
   })
