[bug] Tauri dev failing when adding tailwind to SvelteKit project

[torepettersen]

Describe the bug

After adding tailwindcss to a brand new project, I get an error when running pnpm tauri dev. But works when running pnpm run dev and opening in the browser.

Seems similar to this issue: https://github.com/tauri-apps/tauri/issues/11482

Reproduction

• Create a new project with pnpm create tauri-app. All default options, except selecting Svelte as the framework.
• Add tailwind with pnpm dlx sv add tailwindcss
• Run pnpm tauri dev

Expected behavior

Should be able to run the app, instead of crashing.

Full tauri info output

[✔] Environment
    - OS: EndeavourOS Rolling Release x86_64 (X64)
    ✔ webkit2gtk-4.1: 2.46.3
    ✔ rsvg2: 2.59.2
    ✔ rustc: 1.82.0 (f6e511eec 2024-10-15)
    ✔ cargo: 1.82.0 (8f40fc59f 2024-08-21)
    ✔ rustup: 1.27.1 (54dd3d00f 2024-04-24)
    ✔ Rust toolchain: 1.82.0-x86_64-unknown-linux-gnu (default)
    - node: 22.11.0
    - pnpm: 9.13.2
    - npm: 10.9.0

[-] Packages
    - tauri 🦀: 2.1.1
    - tauri-build 🦀: 2.0.3
    - wry 🦀: 0.47.0
    - tao 🦀: 0.30.8
    - tauri-cli 🦀: 2.0.4
    - @tauri-apps/api : 2.1.1
    - @tauri-apps/cli : 2.1.0

[-] Plugins
    - tauri-plugin-shell 🦀: 2.0.2
    - @tauri-apps/plugin-shell : 2.0.1

[-] App
    - build-type: bundle
    - CSP: unset
    - frontendDist: ../build
    - devUrl: http://localhost:1420/
    - framework: Svelte
    - bundler: Vite

Stack trace

10:39:54 AM [vite] Internal server error: [postcss] /home/tore/workspace/query-nest/src/routes/+page.svelte?svelte&type=style&lang.css:2:12: Unknown word
  Plugin: vite:css
  File: /home/tore/workspace/query-nest/src/routes/+page.svelte?svelte&type=style&lang.css:2:11
  1  |  <script lang="ts">
  2  |    import { invoke } from "@tauri-apps/api/core";
     |             ^
  3  |  
  4  |    let name = $state("");
      at Input.error (/home/tore/workspace/query-nest/node_modules/.pnpm/postcss@8.4.49/node_modules/postcss/lib/input.js:106:16)
      at Parser.unknownWord (/home/tore/workspace/query-nest/node_modules/.pnpm/postcss@8.4.49/node_modules/postcss/lib/parser.js:593:22)
      at Parser.other (/home/tore/workspace/query-nest/node_modules/.pnpm/postcss@8.4.49/node_modules/postcss/lib/parser.js:435:12)
      at Parser.parse (/home/tore/workspace/query-nest/node_modules/.pnpm/postcss@8.4.49/node_modules/postcss/lib/parser.js:470:16)
      at parse (/home/tore/workspace/query-nest/node_modules/.pnpm/postcss@8.4.49/node_modules/postcss/lib/parse.js:11:12)
      at new LazyResult (/home/tore/workspace/query-nest/node_modules/.pnpm/postcss@8.4.49/node_modules/postcss/lib/lazy-result.js:133:16)
      at Processor.process (/home/tore/workspace/query-nest/node_modules/.pnpm/postcss@8.4.49/node_modules/postcss/lib/processor.js:53:14)
      at compileCSS (file:///home/tore/workspace/query-nest/node_modules/.pnpm/vite@5.4.11/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:36897:59)
      at async TransformPluginContext.transform (file:///home/tore/workspace/query-nest/node_modules/.pnpm/vite@5.4.11/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:36170:11)
      at async PluginContainer.transform (file:///home/tore/workspace/query-nest/node_modules/.pnpm/vite@5.4.11/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49096:18)

Additional context

No response

[FabianLars]

But works when running pnpm run dev and opening in the browser.

Can you try that same thing but with epiphany (also known as gnome web)?

[torepettersen]

Yes, I have now tried with Epiphany and it also works there.

[torepettersen]

I now also managed to reproduce the bug in Epiphany.

Seems like I mangage to make it run in Epiphany and with pnpm taruri dev if I open the app in a browser (like Firefox) first and then open the app in Epiphany or the app window afterwards.