Tamagui Switch looks broken on web by default

[t1gu1]

Current Behavior

Here an example of how I use the Switch component

<Switch
        size="$4"
        checked={currentTheme === "dark"}
        onCheckedChange={() =>
          setCurrentTheme(currentTheme === "dark" ? "light" : "dark")
        }
        bg="darkgray"
        cursor="pointer"
        aria-label="Active dark theme"
        accessible // Follow that issue: https://github.com/tamagui/tamagui/issues/2698
      >
        <Switch.Thumb animation="bouncy" />
      </Switch>

And the result on the web. (On mobile it looks perfect. Only a web problem)

Expected Behavior

Here is how I fix it manually by forcing a padding: 0

<Switch
        p={0} // <-- Style is broken in web without p={0}
        size="$4"
        checked={currentTheme === "dark"}
        onCheckedChange={() =>
          setCurrentTheme(currentTheme === "dark" ? "light" : "dark")
        }
        bg="darkgray"
        cursor="pointer"
        aria-label="Active dark theme"
        accessible // Follow that issue: https://github.com/tamagui/tamagui/issues/2698
      >
        <Switch.Thumb animation="bouncy" />
      </Switch>

There is the result by just adding p={0} and it looks great on web et mobile.

Tamagui Version

1.100.0

Platform (Web, iOS, Android)

Web only 

Looks good on mobile

Reproduction

Simply build for the web with the base component.

<Switch
        size="$4"
        checked={currentTheme === "dark"}
        onCheckedChange={() =>
          setCurrentTheme(currentTheme === "dark" ? "light" : "dark")
        }
        bg="darkgray"
        cursor="pointer"
        aria-label="Active dark theme"
        accessible // Follow that issue: https://github.com/tamagui/tamagui/issues/2698
      >
        <Switch.Thumb animation="bouncy" />
      </Switch>

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.46 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 4.0.2 - ~/.nvm/versions/node/v18.16.0/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
    bun: 1.0.2 - ~/.bun/bin/bun
    Watchman: 2024.05.06.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 125.0.6422.142
    Edge: 125.0.2535.85
    Safari: 17.5
  npmPackages:
    @babel/core: ^7.24.5 => 7.24.5 
    @expo/metro-runtime: ~3.2.1 => 3.2.1 
    @react-native-async-storage/async-storage: ^1.23.1 => 1.23.1 
    @react-navigation/drawer: ^6.6.15 => 6.6.15 
    @react-navigation/native: 6.1.17 => 6.1.17 
    @tamagui/config: ^1.100.0 => 1.100.0 
    @tamagui/lucide-icons: ^1.100.0 => 1.100.0 
    @tamagui/metro-plugin: ^1.100.0 => 1.100.0 
    @tamagui/toast: ^1.100.0 => 1.100.0 
    @types/react: ~18.2.79 => 18.2.79 
    @types/react-native: ^0.73.0 => 0.73.0 
    babel-preset-expo: ^11.0.6 => 11.0.6 
    burnt: ^0.12.2 => 0.12.2 
    expo: ~51.0.8 => 51.0.8 
    expo-font: ~12.0.5 => 12.0.5 
    expo-linking: ~6.3.1 => 6.3.1 
    expo-localization: ~15.0.3 => 15.0.3 
    expo-router: ~3.5.14 => 3.5.14 
    expo-splash-screen: ~0.27.4 => 0.27.4 
    expo-status-bar: ^1.12.1 => 1.12.1 
    expo-system-ui: ~3.0.4 => 3.0.4 
    expo-video: ^1.1.10 => 1.1.10 
    expo-web-browser: ~13.0.3 => 13.0.3 
    i18next: ^23.11.5 => 23.11.5 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.3.1 
    react-i18next: ^14.1.2 => 14.1.2 
    react-native: 0.74.1 => 0.74.1 
    react-native-reanimated: ~3.10.1 => 3.10.1 
    react-native-safe-area-context: 4.10.1 => 4.10.1 
    react-native-screens: ~3.31.1 => 3.31.1 
    react-native-svg: ^15.2.0 => 15.3.0 
    react-native-web: ^0.19.12 => 0.19.12 
    tamagui: ^1.100.0 => 1.100.0 
    typescript: ^5.3.3 => 5.4.5 
    zustand: ^4.5.2 => 4.5.2

[t1gu1]

I found the problem. import "@tamagui/core/reset.css"; wasn't imported.

That being said, I stard the project with the expo-router template. So it would be a good idea to add that in the template.

I simply add the import at the main _layout.tsx file.

I will let you close the ticket since it can have an ajustement in the expo router template.

[natew]

Please send that change would be super helpful!