Add tailwind to app-frontend (#2234)

apps/app-frontend/package.json

@@ -30,10 +30,13 @@
   "devDependencies": {
     "@tauri-apps/cli": "^1.6.0",
     "@vitejs/plugin-vue": "^5.0.4",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-config-custom": "workspace:*",
+    "postcss": "^8.4.39",
     "prettier": "^3.2.5",
     "sass": "^1.74.1",
+    "tailwindcss": "^3.4.4",
     "tsconfig": "workspace:*",
     "vite": "^5.2.8"
   },

apps/app-frontend/postcss.config.js

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

apps/app-frontend/src/App.vue

@@ -231,7 +231,7 @@ async function handleCommand(e) {
 
 <template>
   <SplashScreen v-if="!stateFailed" ref="splashScreen" data-tauri-drag-region />
-  <div v-if="stateInitialized" class="container">
+  <div v-if="stateInitialized" class="app-container">
     <div class="nav-container">
       <div class="nav-section">
         <suspense>
@@ -379,7 +379,7 @@ async function handleCommand(e) {
   }
 }
 
-.container {
+.app-container {
   --appbar-height: 3.25rem;
   --sidebar-width: 4.5rem;
 

apps/app-frontend/src/assets/stylesheets/global.scss

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   font-family: var(--font-standard);
   color-scheme: dark;

apps/app-frontend/tailwind.config.js

@@ -0,0 +1,149 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './src/components/**/*.{js,vue,ts}',
+    './src/layouts/**/*.vue',
+    './src/pages/**/*.vue',
+    './src/plugins/**/*.{js,ts}',
+    './src/app.vue',
+    './src/error.vue',
+    // monorepo - TODO: migrate this to its own package
+    '../../packages/**/*.{js,vue,ts}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        icon: 'var(--color-icon)',
+        // Text
+        primary: 'var(--color-text)',
+        contrast: 'var(--color-contrast)',
+        secondary: 'var(--color-secondary)',
+        inactive: 'var(--color-text-inactive)',
+        dark: 'var(--color-text-dark)',
+        inverted: 'var(--color-text-inverted)',
+        heading: 'var(--color-heading)',
+        red: 'var(--color-red)',
+        orange: 'var(--color-orange)',
+        purple: 'var(--color-purple)',
+        bg: {
+          DEFAULT: 'var(--color-bg)',
+          red: 'var(--color-red-bg)',
+          orange: 'var(--color-orange-bg)',
+          green: 'var(--color-green-bg)',
+          blue: 'var(--color-blue-bg)',
+          purple: 'var(--color-purple-bg)',
+          raised: 'var(--color-raised-bg)',
+        },
+        highlight: {
+          DEFAULT: 'var(--color-brand-highlight)',
+          red: 'var(--color-red-highlight)',
+          orange: 'var(--color-orange-highlight)',
+          green: 'var(--color-green-highlight)',
+          blue: 'var(--color-blue-highlight)',
+          purple: 'var(--color-purple-highlight)',
+        },
+        divider: {
+          DEFAULT: 'var(--color-divider)',
+          dark: 'var(--color-divider-dark)',
+        },
+        brand: {
+          DEFAULT: 'var(--color-brand)',
+          red: 'var(--color-red)',
+          orange: 'var(--color-orange)',
+          green: 'var(--color-green)',
+          blue: 'var(--color-blue)',
+          purple: 'var(--color-purple)',
+          highlight: 'var(--color-brand-highlight)',
+          shadow: 'var(--color-brand-shadow)',
+          inverted: 'var(--color-accent-contrast)',
+        },
+        tabUnderlineHovered: 'var(--tab-underline-hovered)',
+        button: {
+          bg: 'var(--color-button-bg)',
+          text: 'var(--color-button-text)',
+          bgHover: 'var(--color-button-bg-hover)',
+          textHover: 'var(--color-button-text-hover)',
+          bgActive: 'var(--color-button-bg-active)',
+          textActive: 'var(--color-button-text-active)',
+        },
+        toggleHandle: 'var(--color-toggle-handle)',
+        dropdown: {
+          bg: 'var(--color-dropdown-bg)',
+          text: 'var(--color-dropdown-text)',
+        },
+        tooltip: {
+          bg: 'var(--color-tooltip-bg)',
+          text: 'var(--color-tooltip-text)',
+        },
+        code: {
+          bg: 'var(--color-code-bg)',
+          text: 'var(--color-code-text)',
+        },
+        kbdShadow: 'var(--color-kbd-shadow)',
+        ad: {
+          DEFAULT: 'var(--color-ad)',
+          raised: 'var(--color-ad-raised)',
+          contrast: 'var(--color-ad-contrast)',
+          highlight: 'var(--color-ad-highlight)',
+        },
+        greyLink: {
+          DEFAULT: 'var(--color-grey-link)',
+          hover: 'var(--color-grey-link-hover)',
+          active: 'var(--color-grey-link-active)',
+        },
+        link: {
+          DEFAULT: 'var(--color-link)',
+          hover: 'var(--color-link-hover)',
+          active: 'var(--color-link-active)',
+        },
+        warning: {
+          bg: 'var(--color-warning-bg)',
+          text: 'var(--color-warning-text)',
+          banner: {
+            text: 'var(--color-warning-banner-text)',
+            bg: 'var(--color-warning-banner-bg)',
+            side: 'var(--color-warning-banner-side)',
+          },
+        },
+        infoBanner: {
+          text: 'var(--color-info-banner-text)',
+          bg: 'var(--color-info-banner-bg)',
+          side: 'var(--color-info-banner-side)',
+        },
+        blockQuote: 'var(--color-block-quote)',
+        headerUnderline: 'var(--color-header-underline)',
+        hr: 'var(--color-hr)',
+        table: {
+          border: 'var(--color-table-border)',
+          alternateRow: ' var(--color-table-alternate-row)',
+        },
+      },
+      backgroundImage: {
+        mazeBg: 'var(--landing-maze-bg)',
+        mazeGradientBg: 'var(--landing-maze-gradient-bg)',
+        landing: {
+          mazeOuterBg: 'var(--landing-maze-outer-bg)',
+          colorHeading: 'var(--landing-color-heading)',
+          colorSubheading: 'var(--landing-color-subheading)',
+          transitionGradientStart: 'var(--landing-transition-gradient-start)',
+          transitionGradientEnd: 'var(--landing-transition-gradient-end)',
+          hoverCardGradient: 'var(--landing-hover-card-gradient)',
+          borderGradient: 'var(--landing-border-gradient)',
+          borderColor: 'var(--landing-border-color)',
+          creatorGradient: 'var(--landing-creator-gradient)',
+          blobGradient: 'var(--landing-blob-gradient)',
+          cardBg: 'var(--landing-card-bg)',
+          blueLabel: 'var(--landing-blue-label)',
+          blueLabelBg: 'var(--landing-blue-label-bg)',
+          greenLabel: 'var(--landing-green-label)',
+          greenLabelBg: 'var(--landing-green-label-bg)',
+          rawBg: 'var(--landing-raw-bg)',
+        },
+      },
+    },
+  },
+  plugins: [],
+  corePlugins: {
+    preflight: false,
+  },
+}

apps/app/Cargo.toml

@@ -19,7 +19,7 @@ theseus = { path = "../../packages/app-lib", features = ["tauri"] }
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
 
-tauri = { version = "1.7.1", features = [ "updater", "app-all", "devtools", "dialog", "dialog-confirm", "dialog-open", "macos-private-api", "os-all", "protocol-asset", "shell-open", "window-close", "window-create", "window-hide", "window-maximize", "window-minimize", "window-set-decorations", "window-show", "window-start-dragging", "window-unmaximize", "window-unminimize"] }
+tauri = { version = "1.7.1", features = [ "app-all", "devtools", "dialog", "dialog-confirm", "dialog-open", "macos-private-api", "os-all", "protocol-asset", "shell-open", "window-close", "window-create", "window-hide", "window-maximize", "window-minimize", "window-set-decorations", "window-show", "window-start-dragging", "window-unmaximize", "window-unminimize"] }
 tauri-plugin-single-instance = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 tauri-plugin-window-state = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 tauri-plugin-deep-link = "0.1.2"