Generating types breaks with Tailwind CSS v`3.3`

[xeho91]

Hi,

thank you for this fantastic tool :heart:

In the version 3.3 of Tailwind CSS, they added a support for ESM and TypeScript config.

I've changed my config to ESM, and rename it to tailwind.config.ts. I am trying to generate the types with the following command:

pnpm typewind generate

then I get the following error:

$ pnpm typewind generate
/home/xeho91/<redacted>/tailwind.config.ts:1
import pluginAspectRatio from "@tailwindcss/aspect-ratio";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at createTypewindContext (/home/xeho91/<redacted>/node_modules/typewind/dist/cli.js:72:56)
    at generateTypes (/home/xeho91/<redacted>/node_modules/typewind/dist/cli.js:155:15)

---

Additional information

My project has type set to module in package.json file.

// package.json
{
  ...
  "type": "module",
  ...
}

[Mokshit06]

Hi, thanks for opening this. Typewind currently directly imports the tailwind config, so it being in ts causes an error. Should be an easy fix, will look into it

[lucasavila00]

Converting the Tailwind configuration file name to tailwind.config.cjs and adapting the code to common JS:

/** @type {import('tailwindcss').Config} */
// eslint-disable-next-line no-undef
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

fixes it

[dy0gu]

Hey there, I'm looking into using typewind and I also have a .ts tailwind config file, am I correct to assume this is still a problem since there have been no further updates here and the issue is still open?

[Mokshit06]

Sorry, yeah this is still a problem. I'll try getting to it this weekend!

[itsjavi]

any update on this or any ideas on how to fix it locally?

I currently run this script and ignore the .js file:

"postinstall": "tsc tailwind.config.ts && typewind generate",

Unfortunately it doesn't work for custom theme tokens :( I am on Nextjs and it doesnt work neither with Babel or SWC

[Mokshit06]

Hey @itsjavi, do you happen to be using the swc plugin? Custom theme tokens won't work with SWC because of its limitations (it can't access the file system to parse the tailwind config). They should be working with the babel plugin though

[Mokshit06]

Just pushed a commit that should enable tailwind.config.ts! Will trigger an NPM deploy once it's live