Add support for tailwind config files in ESM/TS format

Tailwind v3.3 added support for config files in ESM/TS format. See https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-typescript-support
ben-rogerson · Apr 10, 2023 · 80e45fa · 80e45fa
1 parent 59f9b3f
commit 80e45fa
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -118,7 +118,6 @@
     "eslint-plugin-unicorn": "^44.0.2",
     "glob-all": "^3.3.0",
     "husky": "4.3.8",
-    "import-fresh": "^3.3.0",
     "jest": "^29.2.2",
     "lint-staged": "^13.0.3",
     "microbundle": "^0.15.1",

diff --git a/src/core/lib/configHelpers.ts b/src/core/lib/configHelpers.ts
@@ -1,7 +1,6 @@
 import { resolve, dirname } from 'path'
 import { existsSync } from 'fs'
 import escalade from 'escalade/sync'
-import requireFresh from 'import-fresh'
 import { configTwinValidators, configDefaultsTwin } from './twinConfig'
 import defaultTwinConfig from './defaultTailwindConfig'
 import { resolveTailwindConfig, getAllConfigs } from './util/twImports'
@@ -15,6 +14,7 @@ import type {
   Assert,
   AssertContext,
 } from 'core/types'
+import loadConfig from 'tailwindcss/loadConfig'
 
 type Validator = [(value: unknown) => boolean, string]
 
@@ -76,7 +76,7 @@ function getTailwindConfig({
 
   const configs = [
     // User config
-    ...(configExists ? getAllConfigs(requireFresh(configPath as string)) : []),
+    ...(configExists ? getAllConfigs(loadConfig(configPath as string)) : []),
     // Default config
     ...getAllConfigs(defaultTwinConfig),
   ]

diff --git a/tests/__fixtures__/config/tailwind.config.js → tests/__fixtures__/config/tailwind.config.ts b/tests/__fixtures__/config/tailwind.config.js → tests/__fixtures__/config/tailwind.config.ts
@@ -1,4 +1,6 @@
-module.exports = {
+import type { Config } from 'tailwindcss'
+
+export default {
   theme: {
     animation: {
       'zoom-.5': 'zoom-.5 2s',
@@ -50,4 +52,4 @@ module.exports = {
       customFontWeightAsNumber: 800,
     },
   },
-}
+} satisfies Config
diff --git a/tests/plugin.test.js b/tests/plugin.test.js
@@ -30,6 +30,11 @@ pluginTester({
           ) && {
             config: path.join(path.dirname(file), 'tailwind.config.js'),
           }),
+          ...(fs.existsSync(
+            path.join(path.dirname(file), 'tailwind.config.ts')
+          ) && {
+            config: path.join(path.dirname(file), 'tailwind.config.ts'),
+          }),
           ...(fs.existsSync(configFile(file)) &&
             JSON.parse(fs.readFileSync(configFile(file), 'utf8'))),
         },

diff --git a/types/tests/__fixtures__/config/tailwind.config.d.ts b/types/tests/__fixtures__/config/tailwind.config.d.ts
@@ -0,0 +1,52 @@
+declare const _default: {
+  theme: {
+    animation: {
+      'zoom-.5': string
+    }
+    colors: {
+      number: number
+      purple: string
+      'purple-hyphen': string
+      mycolors: {
+        DEFAULT: string
+        'a-purple': string
+        'a-number': number
+      }
+      'my-blue': {
+        100: string
+      }
+      'color-opacity': ({ opacityVariable }: { opacityVariable: any }) => string
+      color: {
+        deep: {
+          config: {
+            500: string
+          }
+        }
+      }
+      blue: {
+        DEFAULT: string
+        gray: {
+          200: string
+        }
+      }
+      'blue-gray': {
+        DEFAULT: string
+        200: string
+      }
+      'blue-gray-green': {
+        DEFAULT: string
+        200: string
+        'deep-dish': {
+          DEFAULT: string
+          200: string
+        }
+      }
+      'blue-gray-green-pink': string
+    }
+    fontWeight: {
+      customFontWeightAsString: string
+      customFontWeightAsNumber: number
+    }
+  }
+}
+export default _default