rogden / tailwind-config-viewer

A local UI tool for visualizing your Tailwind CSS configuration file.
2.01k stars 111 forks source link

Support for tailwind.config.ts #99

Open casually-creative opened 3 months ago

casually-creative commented 3 months ago

Tailwind config viewer does not support using tailwind.config.ts in stead of tailwind.config.js.

Having a tailwind.config.ts in your root and running tailwind-config-viewer -o shows:

Executing task: pnpm run tailwind-config-viewer 

> @example/my-repo@0.0.1 tailwind-config-viewer D:\MyRepoDirectory\my-repo
> tailwind-config-viewer -o

Server Started ∹ http://localhost:3000

  Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'D:\MyRepoDirectory\my-repo\tailwind.config.js' imported from D:\MyRepoDirectory\my-repo\node_modules\.pnpm\tailwind-config-viewer@2.0.4_tailwindcss@3.4.4\node_modules\tailwind-config-viewer\cli\index.js
      at finalizeResolution (node:internal/modules/esm/resolve:265:11)
      at moduleResolve (node:internal/modules/esm/resolve:933:10)
      at defaultResolve (node:internal/modules/esm/resolve:1157:11)
      at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
      at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
      at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:227:38)
      at ModuleLoader.import (node:internal/modules/esm/loader:315:34)
      at defaultImportModuleDynamically (node:internal/modules/esm/utils:194:31)
      at importModuleDynamicallyCallback (node:internal/modules/esm/utils:216:12)
      at tailwindConfigProvider (D:\MyRepoDirectory\my-repo\node_modules\.pnpm\tailwind-config-viewer@2.0.4_tailwindcss@3.4.4\node_modules\tailwind-config-viewer\cli\index.js:20:24)

Adding -c tailwind.config.ts to the script shows:

Executing task: pnpm run tailwind-config-viewer 

> @example/with-tailwindcss@0.0.1 tailwind-config-viewer D:\MyRepoDirectory
> tailwind-config-viewer -o -c tailwind.config.ts

Server Started ∹ http://localhost:3000

  TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for D:\MyRepoDirectory\my-repo\tailwind.config.ts
      at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
      at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
      at defaultLoad (node:internal/modules/esm/load:143:22)
      at async ModuleLoader.load (node:internal/modules/esm/loader:396:7)
      at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:278:45)
      at async link (node:internal/modules/esm/module_job:78:21)

I enjoy writing my tailwind config in typescript. Would love to have this package support it ✌️