Config tamagui library

Install needed dependencies and plugin for vite react web project

.gitignore

@@ -24,4 +24,10 @@ dist-ssr
 *.sw?
 
 # ENV
-.env
+.env
+
+# Tamagui
+.tamagui
+
+# Vite
+.vite

package.json

@@ -2,7 +2,6 @@
   "name": "nimbus-gui",
   "private": true,
   "version": "0.0.0",
-  "type": "module",
   "scripts": {
     "dev": "env-cmd -f .env vite",
     "build": "env-cmd -f .env vite build",
@@ -10,9 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tamagui/shorthands": "^1.39.8",
+    "@tamagui/themes": "^1.39.8",
+    "@tamagui/vite-plugin": "^1.39.8",
     "env-cmd": "^10.1.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "tamagui": "^1.39.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.14",

src/App.jsx

@@ -1,7 +1,11 @@
+import { TamaguiProvider } from "tamagui";
+
+import config from "./tamagui.config.js";
+
 import "./App.css";
 
-function App() {
+const App = () => {
-  return <div></div>;
+  return <TamaguiProvider config={config}></TamaguiProvider>;
-}
+};
 
 export default App;

src/tamagui.config.js

@@ -0,0 +1,24 @@
+import { shorthands } from "@tamagui/shorthands";
+import { themes, tokens } from "@tamagui/themes";
+import { createFont, createTamagui } from "tamagui";
+
+export default createTamagui({
+  themes,
+  tokens,
+  shorthands,
+  fonts: {
+    body: createFont({
+      family: "Arial",
+      size: {
+        // You'll want to fill these values in so you can use them
+        // for now, fontSize="$4" will be 14px.
+        // You can define different keys, but `tamagui`
+        // standardizes on 1-15.
+        4: 14,
+      },
+      lineHeight: {
+        4: 16,
+      },
+    }),
+  },
+});

vite.config.js

@@ -1,7 +1,37 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
-import react from '@vitejs/plugin-react-swc'
+import react from "@vitejs/plugin-react-swc";
+import { tamaguiPlugin } from "@tamagui/vite-plugin";
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
-})
+    react(),
+    tamaguiPlugin({
+      config: "./src/tamagui.config.js",
+      components: ["tamagui"],
+    }),
+  ],
+  define: {
+    "process.env.TAMAGUI_TARGET": JSON.stringify("web"),
+  },
+  resolve: {
+    alias: {
+      "react-native": "react-native-web",
+    },
+  },
+  optimizeDeps: {
+    resolveExtensions: [
+      ".web.js",
+      ".web.ts",
+      ".web.tsx",
+      ".js",
+      ".jsx",
+      ".json",
+      ".ts",
+      ".tsx",
+      ".mjs",
+    ],
+    loader: {
+      ".js": "jsx",
+    },
+  },
+});