Add .mts and .cts config file detection (#13940)

* add `tailwind.config.cts` and `tailwind.config.mts` as default config files

* always use jiti when working with ESM or TS files

* update changelog

* add integration test for `.cts` and `.mts` configuration files

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
 

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'
+  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',
+          export default {
+            content: ['./src/index.html'],
+            theme: {
+              extend: {
+                colors: {
+                  primary: 'black',
+                },
               },
             },
-          },
-          corePlugins: {
-            preflight: false,
-          },
-        } satisfies Config
-      `
-    )
+            corePlugins: {
+              preflight: false,
+            },
+          } satisfies Config
+        `
+      )
 
-    await $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css', {
-      env: { NODE_ENV: 'production' },
-    })
+      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));
-        }
-      `
-    )
-  })
+      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>`)

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 {

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) {