tailwind

stoqey · Jan 27, 2024 · 776bbed · 776bbed
1 parent 21c5594
commit 776bbed
Show file tree

Hide file tree

Showing 8 changed files with 505 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "app-dx-des",
-  "productName": "app-dx-des",
-  "version": "1.0.0",
+  "name": "aij",
+  "productName": "AIJ",
+  "version": "0.0.1",
   "description": "My Electron application description",
   "main": ".webpack/main",
   "scripts": {
@@ -31,24 +31,29 @@
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "@vercel/webpack-asset-relocator-loader": "1.7.3",
+    "autoprefixer": "^10.4.17",
     "css-loader": "^6.0.0",
     "electron": "28.2.0",
     "eslint": "^8.0.1",
     "eslint-plugin-import": "^2.25.0",
     "fork-ts-checker-webpack-plugin": "^7.2.13",
     "node-loader": "^2.0.0",
+    "postcss-loader": "^8.0.0",
     "style-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "ts-node": "^10.0.0",
     "typescript": "~4.5.4"
   },
   "dependencies": {
+    "@headlessui/tailwindcss": "^0.2.0",
     "axios": "^1.6.7",
     "cheerio": "^1.0.0-rc.12",
     "electron-squirrel-startup": "^1.0.0",
     "lodash": "^4.17.21",
+    "postcss": "^8.4.33",
     "puppeteer": "^21.9.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.4.1"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -55,4 +55,14 @@ export const getAppApi = async (): Promise<any> => {
 
 }
 
+// ui using local file storage
+
+
+// auth,
+
+// questions, 
+// resume sections,
+
+// settings
+
 export default api;
diff --git a/src/app/index.tsx b/src/app/index.tsx
@@ -3,8 +3,11 @@ import { createRoot } from "react-dom/client";
 
 const root = createRoot(document.body);
 root.render(
-  <>
+  <div className="p-5">
+    <h1 className="bg-gray-500 text-center text-white">
+      Hi Tailwind has been integrated.
+    </h1>
     <h2>Hello from React!</h2>
     <ClientProcess />
-  </>
+  </div>
 );
diff --git a/src/index.css b/src/index.css
@@ -1,7 +1,3 @@
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
-    Arial, sans-serif;
-  margin: auto;
-  max-width: 38rem;
-  padding: 2rem;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -0,0 +1,95 @@
+import type { Config } from 'tailwindcss';
+
+export default {
+  content: [
+    './src/renderer/**/*.{js,jsx,ts,tsx}',
+    './node_modules/@tremor/**/*.{js,ts,jsx,tsx,mdx}'
+  ],
+  theme: {
+    transparent: 'transparent',
+    current: 'currentColor',
+    extend: {
+      colors: {
+        // light mode
+        tremor: {
+          brand: {
+            faint: '#eff6ff', // blue-50
+            muted: '#bfdbfe', // blue-200
+            subtle: '#60a5fa', // blue-400
+            DEFAULT: '#3b82f6', // blue-500
+            emphasis: '#1d4ed8', // blue-700
+            inverted: '#ffffff' // white
+          },
+          background: {
+            muted: '#f9fafb', // gray-50
+            subtle: '#f3f4f6', // gray-100
+            DEFAULT: '#ffffff', // white
+            emphasis: '#374151' // gray-700
+          },
+          border: {
+            DEFAULT: '#e5e7eb' // gray-200
+          },
+          ring: {
+            DEFAULT: '#e5e7eb' // gray-200
+          },
+          content: {
+            subtle: '#9ca3af', // gray-400
+            DEFAULT: '#6b7280', // gray-500
+            emphasis: '#374151', // gray-700
+            strong: '#111827', // gray-900
+            inverted: '#ffffff' // white
+          }
+        }
+      },
+      boxShadow: {
+        // light
+        'tremor-input': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        'tremor-card':
+          '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+        'tremor-dropdown':
+          '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
+      },
+      borderRadius: {
+        'tremor-small': '0.375rem',
+        'tremor-default': '0.5rem',
+        'tremor-full': '9999px'
+      },
+      fontSize: {
+        'tremor-label': '0.75rem',
+        'tremor-default': ['0.875rem', { lineHeight: '1.25rem' }],
+        'tremor-title': ['1.125rem', { lineHeight: '1.75rem' }],
+        'tremor-metric': ['1.875rem', { lineHeight: '2.25rem' }]
+      }
+    }
+  },
+  safelist: [
+    {
+      pattern:
+        /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+      variants: ['hover', 'ui-selected']
+    },
+    {
+      pattern:
+        /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+      variants: ['hover', 'ui-selected']
+    },
+    {
+      pattern:
+        /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+      variants: ['hover', 'ui-selected']
+    },
+    {
+      pattern:
+        /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/
+    },
+    {
+      pattern:
+        /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/
+    },
+    {
+      pattern:
+        /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/
+    }
+  ],
+  plugins: [require('@headlessui/tailwindcss')]
+} satisfies Config;
diff --git a/webpack.renderer.config.ts b/webpack.renderer.config.ts
@@ -1,13 +1,13 @@
 import type { Configuration } from 'webpack';
-
-import { rules } from './webpack.rules';
 import { plugins } from './webpack.plugins';
+import { rules } from './webpack.rules';
 
 rules.push({
   test: /\.css$/,
-  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
+  use: ['style-loader', 'css-loader', 'postcss-loader'],
 });
 
+
 export const rendererConfig: Configuration = {
   module: {
     rules,