Merge pull request #16 from Nuklai/piotr-add-tailwindcss

Add tailwind

Author: piotrpietruszka

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-  "cSpell.words": ["Nuklai", "wailsjs"],
+  "cSpell.words": ["Nuklai", "tailwindcss", "wailsjs"],
   "editor.defaultFormatter": "biomejs.biome"
 }

frontend/package.json

@@ -15,15 +15,19 @@
     "antd": "^5.8.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.15.0"
+    "react-router-dom": "^6.15.0",
+    "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
     "path": "^0.12.7",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
     "typescript": "^5.5.3",
     "url": "^0.11.1",
     "vite": "^5.3.3"

frontend/package.json.md5

@@ -1 +1 @@
-56fb010925dec06f4b587d097770583a
+9e93899b1ad4a37715ca6687c4d288f2

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

frontend/src/App.css

@@ -1,59 +1,3 @@
-#app {
-  height: 100vh;
-  text-align: center;
-}
-
-#logo {
-  display: block;
-  width: 50%;
-  height: 50%;
-  margin: auto;
-  padding: 10% 0 0;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  background-origin: content-box;
-}
-
-.result {
-  height: 20px;
-  line-height: 20px;
-  margin: 1.5rem auto;
-}
-
-.input-box .btn {
-  width: 60px;
-  height: 30px;
-  line-height: 30px;
-  border-radius: 3px;
-  border: none;
-  margin: 0 0 0 20px;
-  padding: 0 8px;
-  cursor: pointer;
-}
-
-.input-box .btn:hover {
-  background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
-  color: #333333;
-}
-
-.input-box .input {
-  border: none;
-  border-radius: 3px;
-  outline: none;
-  height: 30px;
-  line-height: 30px;
-  padding: 0 10px;
-  background-color: rgba(240, 240, 240, 1);
-  -webkit-font-smoothing: antialiased;
-}
-
-.input-box .input:hover {
-  border: none;
-  background-color: rgba(255, 255, 255, 1);
-}
-
-.input-box .input:focus {
-  border: none;
-  background-color: rgba(255, 255, 255, 1);
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/src/App.tsx

@@ -8,6 +8,8 @@ import { GetCommitHash, OpenLink } from '../wailsjs/go/main/App';
 import logo from './assets/images/nuklai-footer.png';
 import NavBar from './components/NavBar';
 
+import './App.css';
+
 const { Text } = Typography;
 const { Content } = Layout;
 

frontend/src/style.css

@@ -0,0 +1,51 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    colors: {
+      primary: '#08F7DB',
+      'primary-25': '#06C6AF',
+      secondary: '#6FB3F6',
+      'secondary-25': '#8FABD4',
+      token: '#2775CA',
+      inactive: '#5C5C6D',
+      border: '#2D2F41',
+      'alert-25': '#CD2B38',
+      'alert-50': '#D94854',
+      'accent-25': '#71AA7A',
+      'accept-50': '#3C994B',
+      white: '#FFFFFF',
+      black: '#030F1B',
+      'font-75': '#27282D',
+      'font-100': '#E0EFFDA6',
+      'font-200': '#CDCFD0',
+      'font-300': '#CFE6FC',
+      'font-header': '#FEB67B',
+      'banner-header':
+        'linear-gradient(174deg, #08F7DB 27.73%, #0F81F0 75.48%)',
+      'banner-suitable': '#CDCFD0',
+      'schema-25': '#D0B071',
+      'schema-50': '#71D07F',
+      'schema-75': '#B0DDEC',
+      'schema-100': '#8DBAFF',
+      'schema-125': '#B0DDEC',
+      'schema-border': '#595C6D',
+      'schema-marked': '#FFCAC4',
+      paper: '#0E1724',
+      'paper-25': '#0C1624',
+      'paper-50': '#1D202CB2',
+      body: '#020D1E',
+      'body-blur':
+        'linear-gradient(6deg, rgba(20, 14, 37, 0.75) 3.09%, rgba(14, 25, 39, 0.75) 96.86%)',
+      'background-solid-25': '#103764',
+      select: '#9BBEF273',
+      'schema-tab': '#30384B',
+      'schema-body': '#252939',
+      'schema-modal': '#383B4E',
+      'schema-tags': '#42465A',
+      banner: '#080A1CBA',
+      'banner-body': 'linear-gradient(274deg, #020F18 20.87%, #0A0F17 76.32%)',
+    },
+  },
+  plugins: [],
+};