[BUG] Support tailwind.config.ts

[itsmingjie]

Describe the bug
Tailwind release v3.3 today introduced support for ESM and TypeScript config files. It currently does not look like the ESLint plugin supports configuration files written in tailwind.config.ts.

To Reproduce

1. Follow the demo instructions in the v3.3 release blog post and set up a TypeScript configuration.
2. Run eslint
3. The configuration file is not loaded in, causing false positives.

Expected behavior
Config files written with tailwind.config.ts should be supported.

Environment (please complete the following information):

• Tailwind v3.3
• ESLint v8.36.0
• Plugin: v3.10.1

Additional context
This may be a duplicate of #156, but it is introduced with a different context. Escalated it to bug because there is now official support for config files written in TypeScript.

Related upstream PR
tailwindlabs/tailwindcss#10785

[taep96]

Related: #190
Relevant code: lib/util/customConfig.js

I think looking up all js/ts formats is the best solution: tailwind.config.{js,mjs,cjs,ts,mts,cts}

The old workaround unfortunately doesn't work for ESM/TS files.

[itsmingjie]

I think TypeScript needs to be compiled down before it can be parsed directly by the plugin, it's not working for me even after specifying .ts. I could be wrong though.

[taep96]

I was editing my comment when you said that 😅

[pm0u]

I managed to get this working following this (somewhat ridiculous) suggestion from before TS support existed for Tailwind.

yarn add -D @swc-node/register @swc/core

// tailwind-config.js
const { register } = require("@swc-node/register/register")
const {
  readDefaultTsConfig,
} = require("@swc-node/register/read-default-tsconfig")
const path = require("path")
register(readDefaultTsConfig(path.join(__dirname, "tsconfig.json")))
module.exports = require("./tailwind.config").default

// tailwind.config.ts

export default {
  plugins: [],
  theme: {
    extend: {},
  },
  /** ... */
} 

// .eslintrc.js

module.exports = {
  extends: [
    "plugin/tailwindcss:recommended"
  ],
  settings: {
    tailwindcss: {
      config: "./tailwind-config.js"
    }
  }
}

I opted to make the JS file a non-autodetectable name since some things might pick it up by default otherwise. Mainly storybook.

Edit: I'm actually not sure the above works. It seems to work in VSCode, but the CLI doesn't seem to work properly.

edit again: Ok, they are in fact both working properly. Changing branches and things, i ran into some weird issues with errors showing up in VSCode but not the CLI. it seems like removing node_modules fixes the issue though. I'm not really sure why.

[tonyxiao]

Why not use jiti which is the strategy used by tailwind itself?

[pm0u]

I hadn't heard of jiti - i changed my implementation to use it because I was running into issues with deploying serverless functions on Vercel, they were pulling in SWC. really an issue with their dependency resolution, but since jiti is smaller it solved our issue so thanks for mentioning that package @tonyxiao

[quesabe]

Seems like a possible solution is to use loadConfig from tailwindcss.

In addition within the rules instead of using default value for config (defined in the rule context as a string) the resolveDefaultConfigPath should be used to look for all possible extensions.