From f775bde2a767d0aade7c54c9784b78c5f928e0b3 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 3 Jul 2024 13:00:08 +0200
Subject: [PATCH 1/4] add `tailwind.config.cts` and `tailwind.config.mts` as
 default config files

---
 src/util/resolveConfigPath.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/util/resolveConfigPath.js b/src/util/resolveConfigPath.js
index 2b5078949761..e082f4c38e60 100644
--- a/src/util/resolveConfigPath.js
+++ b/src/util/resolveConfigPath.js
@@ -6,6 +6,8 @@ const defaultConfigFiles = [
   './tailwind.config.cjs',
   './tailwind.config.mjs',
   './tailwind.config.ts',
+  './tailwind.config.cts',
+  './tailwind.config.mts',
 ]
 
 function isObject(value) {

From 4b2d13118ff10165d89bc21f935469787ac2bcfb Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 3 Jul 2024 13:09:25 +0200
Subject: [PATCH 2/4] always use jiti when working with ESM or TS files

---
 src/lib/load-config.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/lib/load-config.ts b/src/lib/load-config.ts
index eab7d348ee43..eaff8e95b410 100644
--- a/src/lib/load-config.ts
+++ b/src/lib/load-config.ts
@@ -33,6 +33,17 @@ function lazyJiti() {
 
 export function loadConfig(path: string): Config {
   let config = (function () {
+    // Always use jiti for ESM or TS files
+    if (
+      path &&
+      (path.endsWith('.mjs') ||
+        path.endsWith('.ts') ||
+        path.endsWith('.cts') ||
+        path.endsWith('.mts'))
+    ) {
+      return lazyJiti()(path)
+    }
+
     try {
       return path ? require(path) : {}
     } catch {

From baba55a47386e5fcd9dccfe698e639d39221ae0d Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 3 Jul 2024 13:13:49 +0200
Subject: [PATCH 3/4] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 906f87a3968c..0a452d7bff6f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Disable automatic `var()` injection for anchor properties ([#13826](https://github.com/tailwindlabs/tailwindcss/pull/13826))
 - Use no value instead of `blur(0px)` for `backdrop-blur-none` and `blur-none` utilities ([#13830](https://github.com/tailwindlabs/tailwindcss/pull/13830))
+- Add `.mts` and `.cts` config file detection ([#13940](https://github.com/tailwindlabs/tailwindcss/pull/13940))
 
 ## [3.4.4] - 2024-06-05
 

From 184de9dd7745e6a00a361060625421845159baab Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 3 Jul 2024 22:44:47 +0200
Subject: [PATCH 4/4] add integration test for `.cts` and `.mts` configuration
 files

---
 .../tailwindcss-cli/tests/integration.test.js | 89 ++++++++++---------
 1 file changed, 46 insertions(+), 43 deletions(-)

diff --git a/integrations/tailwindcss-cli/tests/integration.test.js b/integrations/tailwindcss-cli/tests/integration.test.js
index b53f8afaf388..31b362353fbf 100644
--- a/integrations/tailwindcss-cli/tests/integration.test.js
+++ b/integrations/tailwindcss-cli/tests/integration.test.js
@@ -134,51 +134,54 @@ describe('static build', () => {
     )
   })
 
-  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',
+  it.each([['../tailwind.config.ts'], ['../tailwind.config.cts'], ['../tailwind.config.mts']])(
+    'can use a %s configuration file',
+    async (path) => {
+      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(
+        path,
+        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' },
-    })
-
-    expect(await readOutputFile('main.css')).toIncludeCss(
-      css`
-        .bg-primary {
-          --tw-bg-opacity: 1;
-          background-color: rgb(0 0 0 / var(--tw-bg-opacity));
-        }
-      `
-    )
-  })
+            corePlugins: {
+              preflight: false,
+            },
+          } satisfies Config
+        `
+      )
+
+      await $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css', {
+        env: { NODE_ENV: 'production' },
+      })
+
+      expect(await readOutputFile('main.css')).toIncludeCss(
+        css`
+          .bg-primary {
+            --tw-bg-opacity: 1;
+            background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          }
+        `
+      )
+    }
+  )
 
   it('can read from a config file from an @config directive', async () => {
     await writeInputFile('index.html', html`<div class="bg-yellow"></div>`)