CLI does not support TypeScript

[iBobik]

$ npx tailwind-config-viewer export public
node:internal/modules/cjs/loader:959
  throw err;
  ^
Error: Cannot find module '/tailwind.config.js'

npx tailwind-config-viewer export -c tailwind.config.ts
/Users/Bobik/Sites/vitae-frontend/tailwind.config.ts:1
import { Config } from 'tailwindcss'
^^^^^^

SyntaxError: Cannot use import statement outside a module

When using Taiwind Nuxt module which has viewer embeded TS config works with dev server.

[Shmookoff]

has anyone made progress on this..?

[nbrdx]

I'm also interested in any progress on this feature 👍

[rogden]

Though the importing of Config is only necessary for TS, this seems less like a TS issue and more an ESM issue correct?

[urbgimtam]

Interested in this too. 👀

[kedarguy]

Here is a workaround that worked for me, add the following scripts to package.json

"compile-tw-config": "tsc tailwind.config.ts --outDir dist-tw-config",
"tailwind-config-viewer": "npm run compile-tw-config && tailwind-config-viewer -c dist-tw-config/tailwind.config.js -o -p 3003",
"tailwind-config-export": "npm run compile-tw-config && tailwind-config-viewer -c dist-tw-config/tailwind.config.js export ../design-system"

[luixo]

A very important feature, a pity typescript doesn't work at the moment.

[ineshbose]

When using Tailwind Nuxt module which has viewer embeded TS config works with dev server.

This issue shouldn't persist in the latest versions of the module I hope?

I think ESM support within the module (aside from configs) is #49.

[tetarchus]

Workaround that I've found to work so sharing here (compiling with tsc was not working due to settings elsewhere in a monorepo).

• Install tsx as a devDependency - npm i -D tsx
• Set NODE_OPTIONS prior to running tailwind-config-viewer source.
  • For Node v20.6.0+ - NODE_OPTIONS="--import tsx/esm"
  • For Node v20.5.1 and below - NODE_OPTIONS="--loader tsx/esm"
• Add scripts:
  • "tw:inpect": "NODE_OPTIONS=\"--import tsx/esm\" npx tailwind-config-viewer [options]"
  • "tw:export": "mkdir -p [outputDir] && NODE_OPTIONS=\"--import tsx/esm\" npx tailwind-config-viewer export [outputDir] [options]"

The mkdir call for export was required as the export was failing for me if the directory did not exist - this ensures it does - alternatively just make the directory manually.

Running with npm run tw:inspect then starts the server on port 3000 with no issues.