From 57fecf0db7b457070f9d83ebc5136376b13a60f1 Mon Sep 17 00:00:00 2001 From: DarkFalc0n Date: Sun, 10 Mar 2024 02:52:21 +0530 Subject: [PATCH] fix: change tailwind config for vite app --- app/package.json | 2 ++ app/postcss.config.js | 6 ++++ app/src/App.css | 78 ++++++++++++++++++++++++++++++++++++++++ app/src/App.tsx | 8 ++++- app/src/assets/react.svg | 1 - app/src/index.css | 44 ++++++++++++----------- app/tailwind.config.js | 4 +++ package.json | 26 ++++++++------ pnpm-lock.yaml | 31 ++++++++++++++++ 9 files changed, 166 insertions(+), 34 deletions(-) create mode 100644 app/postcss.config.js delete mode 100644 app/src/assets/react.svg diff --git a/app/package.json b/app/package.json index 36de302..9a29a81 100644 --- a/app/package.json +++ b/app/package.json @@ -24,9 +24,11 @@ "@typescript-eslint/eslint-plugin": "^7.0.2", "@typescript-eslint/parser": "^7.0.2", "@vitejs/plugin-react": "^4.2.1", + "autoprefixer": "^10.4.18", "eslint": "^8.56.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", + "postcss": "^8.4.35", "tailwindcss": "^3.4.1", "typescript": "^5.2.2", "vite": "^5.1.4" diff --git a/app/postcss.config.js b/app/postcss.config.js new file mode 100644 index 0000000..2e7af2b --- /dev/null +++ b/app/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/app/src/App.css b/app/src/App.css index e69de29..ccde402 100644 --- a/app/src/App.css +++ b/app/src/App.css @@ -0,0 +1,78 @@ +@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"); +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: #222831; + --foreground: 0 0% 3.9%; + + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + + --radius: 0.5rem; + } + + .dark { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + background: #222831; + color: #fff; + } +} diff --git a/app/src/App.tsx b/app/src/App.tsx index bcffb8e..cd8daf3 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -1,7 +1,13 @@ import "./App.css"; function App() { - return <>; + return ( +
+
+ SnTx +
+
+ ); } export default App; diff --git a/app/src/assets/react.svg b/app/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/app/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/src/index.css b/app/src/index.css index 52a8d2d..ccde402 100644 --- a/app/src/index.css +++ b/app/src/index.css @@ -1,76 +1,78 @@ +@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; - + @layer base { :root { - --background: 0 0% 100%; + --background: #222831; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; - + --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; - + --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; - + --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; - + --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; - + --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; - + --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; - + --radius: 0.5rem; } - + .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; - + --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; - + --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; - + --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; - + --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; - + --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; - + --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; - + --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; - + --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; } } - + @layer base { * { @apply border-border; } body { - @apply bg-background text-foreground; + background: #222831; + color: #fff; } -} \ No newline at end of file +} diff --git a/app/tailwind.config.js b/app/tailwind.config.js index 0730ff9..88cadc8 100644 --- a/app/tailwind.config.js +++ b/app/tailwind.config.js @@ -2,6 +2,7 @@ module.exports = { darkMode: ["class"], content: [ + "./index.html", "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", @@ -17,6 +18,9 @@ module.exports = { }, }, extend: { + fontFamily: { + noto: ["Noto Sans", "sans-serif"], + }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", diff --git a/package.json b/package.json index 59c740f..80c4d5b 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,17 @@ { - "name": "sntx", - "scripts": { - "dev": "pnpm run \"/^dev:.*/\"", - "dev:api": "cd api && go run cmd/main.go", - "dev:app": "cd app && pnpm run dev" - }, - "author": { - "name": "TheNestDevs", - "url": "https://github.com/TheNestDevs" - }, - "packageManager": "pnpm@8.15.4" + "name": "sntx", + "scripts": { + "dev": "pnpm run \"/^dev:.*/\"", + "dev:api": "cd api && go run cmd/main.go", + "dev:app": "cd app && pnpm run dev" + }, + "author": { + "name": "TheNestDevs", + "url": "https://github.com/TheNestDevs" + }, + "packageManager": "pnpm@8.15.4", + "workspaces": [ + "api", + "app" + ] } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 941709b..81315ac 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -47,6 +47,9 @@ importers: '@vitejs/plugin-react': specifier: ^4.2.1 version: 4.2.1(vite@5.1.5) + autoprefixer: + specifier: ^10.4.18 + version: 10.4.18(postcss@8.4.35) eslint: specifier: ^8.56.0 version: 8.57.0 @@ -56,6 +59,9 @@ importers: eslint-plugin-react-refresh: specifier: ^0.4.5 version: 0.4.5(eslint@8.57.0) + postcss: + specifier: ^8.4.35 + version: 8.4.35 tailwindcss: specifier: ^3.4.1 version: 3.4.1 @@ -1021,6 +1027,22 @@ packages: engines: {node: '>=8'} dev: true + /autoprefixer@10.4.18(postcss@8.4.35): + resolution: {integrity: sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==} + engines: {node: ^10 || ^12 || >=14} + hasBin: true + peerDependencies: + postcss: ^8.1.0 + dependencies: + browserslist: 4.23.0 + caniuse-lite: 1.0.30001596 + fraction.js: 4.3.7 + normalize-range: 0.1.2 + picocolors: 1.0.0 + postcss: 8.4.35 + postcss-value-parser: 4.2.0 + dev: true + /balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} @@ -1438,6 +1460,10 @@ packages: cross-spawn: 7.0.3 signal-exit: 4.1.0 + /fraction.js@4.3.7: + resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} + dev: true + /fs.realpath@1.0.0: resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} dev: true @@ -1770,6 +1796,11 @@ packages: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} + /normalize-range@0.1.2: + resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} + engines: {node: '>=0.10.0'} + dev: true + /object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'}