tauritauri-2

Is there a way to have platform-specific CSS/HTML?

For example, I want mac.css and window.css to be applied only when Tauri builds for that particular platform.

I'm using Vite with Tauri.

Solution

  • Enable TAURI_ environment variables in your Vite config:

    export default defineConfig(async () => ({
  // ...
  envPrefix: ["VITE_", "TAURI_"],
  // ...

    And then you can use it in your main.ts file as such:

    console.log(import.meta.env.TAURI_ENV_PLATFORM)

    It also can be convinient to make a module with exported constants:

    export const isLinux = import.meta.env.TAURI_ENV_PLATFORM === "linux"
export const isMacOS = import.meta.env.TAURI_ENV_PLATFORM === "darwin"
export const isWindows = import.meta.env.TAURI_ENV_PLATFORM === "windows"