Add support for TypeScript configuration files

index.d.ts

@@ -0,0 +1,23 @@
+type TailwindConfig = any
+
+/**
+ * Defines the Tailwind CSS configuration.
+ * 
+ * @example
+ * ```ts
+ * import { defineConfig } from 'tailwindcss'
+ * 
+ * export default defineConfig({
+ *   content: ['src/*.vue'],
+ *   theme: {
+ *     // ...
+ *   }
+ * })
+ * ```
+ */
+export function defineConfig(options?: TailwindConfig): TailwindConfig
+
+/**
+ * Tailwind CSS as a PostCSS plugin.
+ */
+export const tailwindcss: Plugin

package.json

@@ -83,7 +83,8 @@
     "postcss-selector-parser": "^6.0.9",
     "postcss-value-parser": "^4.2.0",
     "quick-lru": "^5.1.1",
-    "resolve": "^1.22.0"
+    "resolve": "^1.22.0",
+    "unconfig": "^0.2.2"
   },
   "browserslist": [
     "> 1%",

src/index.js

@@ -2,7 +2,7 @@ import setupTrackingContext from './lib/setupTrackingContext'
 import processTailwindFeatures from './processTailwindFeatures'
 import { env } from './lib/sharedState'
 
-module.exports = function tailwindcss(configOrPath) {
+const plugin = function tailwindcss(configOrPath) {
   return {
     postcssPlugin: 'tailwindcss',
     plugins: [
@@ -12,8 +12,8 @@ module.exports = function tailwindcss(configOrPath) {
           console.time('JIT TOTAL')
           return root
         },
-      function (root, result) {
-        processTailwindFeatures(setupTrackingContext(configOrPath))(root, result)
+      async function (root, result) {
+        await processTailwindFeatures(setupTrackingContext(configOrPath))(root, result)
       },
       env.DEBUG &&
         function (root) {
@@ -25,4 +25,7 @@ module.exports = function tailwindcss(configOrPath) {
   }
 }
 
+module.exports = plugin
 module.exports.postcss = true
+module.exports.tailwindcss = plugin
+module.exports.defineConfig = (config) => config

src/lib/setupTrackingContext.js

@@ -4,6 +4,7 @@ import path from 'path'
 import fastGlob from 'fast-glob'
 import LRU from 'quick-lru'
 import normalizePath from 'normalize-path'
+import { loadConfig } from 'unconfig'
 
 import hash from '../util/hashConfig'
 import getModuleDependencies from '../lib/getModuleDependencies'
@@ -34,9 +35,25 @@ function getCandidateFiles(context, tailwindConfig) {
 }
 
 // Get the config object based on a path
-function getTailwindConfig(configOrPath) {
+export async function getTailwindConfig(configOrPath) {
   let userConfigPath = resolveConfigPath(configOrPath)
 
+  // Try loading with unconfig first
+  if (!userConfigPath || typeof userConfigPath === 'string') {
+    const unconfig = await loadConfig({
+      merge: false,
+      sources: [
+        { files: userConfigPath?.replace(/\.ts$/, ''), extensions: ['ts'], skipOnError: true },
+        { files: 'tailwind.config', extensions: ['ts'], skipOnError: true },
+      ],
+    })
+
+    if (unconfig.sources.length > 0) {
+      const resolvedConfig = resolveConfig(unconfig.config)
+      return [resolvedConfig, null, hash(resolvedConfig), []]
+    }
+  }
+
   if (userConfigPath !== null) {
     let [prevConfig, prevConfigHash, prevDeps, prevModified] =
       configPathCache.get(userConfigPath) || []
@@ -113,9 +130,9 @@ function resolveChangedFiles(candidateFiles, fileModifiedMap) {
 // plugins) then return it
 export default function setupTrackingContext(configOrPath) {
   return ({ tailwindDirectives, registerDependency, applyDirectives }) => {
-    return (root, result) => {
+    return async (root, result) => {
       let [tailwindConfig, userConfigPath, tailwindConfigHash, configDependencies] =
-        getTailwindConfig(configOrPath)
+        await getTailwindConfig(configOrPath)
 
       let contextDependencies = new Set(configDependencies)
 

src/processTailwindFeatures.js

@@ -12,7 +12,7 @@ import { createContext } from './lib/setupContextUtils'
 import { issueFlagNotices } from './featureFlags'
 
 export default function processTailwindFeatures(setupContext) {
-  return function (root, result) {
+  return async function (root, result) {
     let { tailwindDirectives, applyDirectives } = normalizeTailwindDirectives(root)
 
     detectNesting()(root, result)
@@ -21,7 +21,7 @@ export default function processTailwindFeatures(setupContext) {
     // itself.
     partitionApplyAtRules()(root, result)
 
-    let context = setupContext({
+    let context = await setupContext({
       tailwindDirectives,
       applyDirectives,
       registerDependency(dependency) {

tests/customConfig.test.js

@@ -4,6 +4,7 @@ import { cjsConfigFile, defaultConfigFile } from '../src/constants'
 import inTempDirectory from '../jest/runInTempDirectory'
 
 import { run, html, css, javascript } from './util/run'
+import { getTailwindConfig } from '../src/lib/setupTrackingContext'
 
 test('it uses the values from the custom config file', () => {
   let config = require(path.resolve(`${__dirname}/fixtures/custom-config.js`))
@@ -19,6 +20,20 @@ test('it uses the values from the custom config file', () => {
   })
 })
 
+test('it resolves a typescript config file', async () => {
+  let [config] = await getTailwindConfig(path.resolve(`${__dirname}/fixtures/ts-config.ts`))
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      @media (min-width: 400px) {
+        .mobile\:font-bold {
+          font-weight: 700;
+        }
+      }
+    `)
+  })
+})
+
 test('custom config can be passed as an object', () => {
   let config = {
     content: [{ raw: html`<div class="mobile:font-bold"></div>` }],

tests/fixtures/ts-config.ts

@@ -0,0 +1,11 @@
+// @ts-ignore
+import { defineConfig } from '../../src'
+
+export default defineConfig({
+  content: [{ raw: '<div class="mobile:font-bold"></div>' }],
+  theme: {
+    screens: {
+      mobile: '400px',
+    },
+  },
+})