Mokshit06 / typewind

The safety of Typescript with the magic of Tailwind.
https://typewind.dev/
MIT License
2.19k stars 25 forks source link

Generating types breaks with Tailwind CSS v`3.3` #44

Open xeho91 opened 1 year ago

xeho91 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 2 weeks ago

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 commented 1 week ago

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