Vite + Typewind doesn't generate Tailwind styles

[SkanePrime]

Hi! I'm trying to use Vite React with Tailwind and Typewind but having trouble with styles of it

It seems that Typewind transforms classNames but Tailwind doesn't generate styles for it

Here is repository where this bug is being replicated https://github.com/skaneprime/nx-react-vite-tailwind-typewind-issue

[Kavin Valli]

Hi @skaneprime! There's a mistake in your transforms import in your tailwind config file. It should be typewindTransforms and not typewindTransform.

https://typewind.vercel.app/docs/installation#add-transformer

[SkanePrime]

Hi @skaneprime! There's a mistake in your transforms import in your tailwind config file. It should be typewindTransforms and not typewindTransform.

https://typewind.vercel.app/docs/installation#add-transformer

I see! Switched to typewindTransforms and started to get css error! Any ideas on what is wrong?

[Mokshit Jain]

Hi @skaneprime can you provide the steps on how to setup this repository locally and run this app?

[SkanePrime]

Hi @skaneprime can you provide the steps on how to setup this repository locally and run this app?

Sure! I updated nx-react-vite-tailwind-typewind-issue

The issue appears on desktop app (Tauri)
nx serve-frontend desktop

[SkanePrime]

After debugging a little it seems transformBabel function tries to process non existing file typewind.tsx

{
  metadata: {},
  options: {
    assumptions: {},
    babelrcRoots: [ '*' ],
    filename: 'W:\\vault\\typewind.tsx',
    targets: {},
    cloneInputAst: true,
    babelrc: false,
    configFile: false,
    browserslistConfigFile: false,
    passPerPreset: false,
    envName: 'development',
    cwd: 'W:\\vault',
    root: 'W:\\vault',
    rootMode: 'root',
    plugins: [ [Plugin], [Plugin] ],
    presets: [],
    parserOpts: {
      sourceType: 'module',
      sourceFileName: 'W:\\vault\\typewind.tsx',
      plugins: [Array]
    },
    generatorOpts: {
      filename: 'W:\\vault\\typewind.tsx',
      auxiliaryCommentBefore: undefined,
      auxiliaryCommentAfter: undefined,
      retainLines: undefined,
      comments: true,
      shouldPrintComment: undefined,
      compact: 'auto',
      minified: undefined,
      sourceMaps: false,
      sourceRoot: undefined,
      sourceFileName: 'typewind.tsx',
      inputSourceMap: undefined
    }
  },
  ast: null,
  code: '',
  map: null,
  sourceType: 'module',
  externalDependencies: Set(0) {}
}

[Mokshit Jain]

I am getting this error on running the command :

 >  NX   Could not find ".modules.yaml" at "/Users/mokshitjain/dev/temp/nx-react-vite-tailwind-typewind-issue/node_modules/.modules.yaml"

   
   Because of the error the Nx daemon process has exited. The next Nx command is going to restart the daemon process.
   If the error persists, please run "nx reset".

[SkanePrime]

I am getting this error on running the command :

 >  NX   Could not find ".modules.yaml" at "/Users/mokshitjain/dev/temp/nx-react-vite-tailwind-typewind-issue/node_modules/.modules.yaml"

   
   Because of the error the Nx daemon process has exited. The next Nx command is going to restart the daemon process.
   If the error persists, please run "nx reset".

can you please type
nx reset
pnpm i
nx serve-frontend desktop

[Mokshit Jain]

So the error was occurring because of this condition:

  if (res?.code) {
    return res?.code;
  }
  throw new Error("Failed to transform file");

In this case, res.code was an empty string so it threw the error instead. I've fixed it to check for undefined instead.