Use tailwind in aerie. Integrate with pre-release svelte stellar.

.vscode/extensions.json

@@ -8,6 +8,7 @@
     "GraphQL.vscode-graphql",
     "christian-kohler.path-intellisense",
     "streetsidesoftware.code-spell-checker",
-    "spmeesseman.vscode-taskexplorer"
+    "spmeesseman.vscode-taskexplorer",
+    "bradlc.vscode-tailwindcss"
   ]
 }

.vscode/settings.json

@@ -26,5 +26,8 @@
   },
   "[svelte]": {
     "editor.defaultFormatter": "svelte.svelte-vscode"
+  },
+  "files.associations": {
+    "*.css": "tailwindcss"
   }
 }

package.json

@@ -41,8 +41,8 @@
     "@fontsource/jetbrains-mono": "^5.0.19",
     "@nasa-jpl/aerie-ampcs": "^1.0.5",
     "@nasa-jpl/seq-json-schema": "^1.0.20",
-    "@nasa-jpl/stellar": "^2.0.0-alpha.24",
-    "@nasa-jpl/stellar-svelte": "^2.0.0-alpha.24",
+    "@nasa-jpl/stellar": "^2.0.0-alpha.27",
+    "@nasa-jpl/stellar-svelte": "^2.0.0-alpha.27",
     "@streamparser/json": "^0.0.17",
     "@sveltejs/adapter-node": "5.0.1",
     "@sveltejs/kit": "^2.5.4",
@@ -110,6 +110,7 @@
     "@vitejs/plugin-basic-ssl": "^1.1.0",
     "@vitest/coverage-v8": "^1.4.0",
     "@vitest/ui": "^1.4.0",
+    "autoprefixer": "^10.4.20",
     "cloc": "2.0.0-cloc",
     "codemirror": "^6.0.1",
     "d3-format": "^3.1.0",
@@ -121,6 +122,7 @@
     "jsdom": "^24.0.0",
     "picocolors": "^1.0.0",
     "picomatch": "^4.0.1",
+    "postcss": "^8.4.47",
     "postcss-html": "^1.5.0",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.2",
@@ -129,6 +131,7 @@
     "stylelint-config-html": "^1.1.0",
     "stylelint-order": "^6.0.4",
     "svelte-check": "^3.4.4",
+    "tailwindcss": "^3.4.14",
     "tslib": "^2.6.0",
     "typescript": "5.0.4",
     "unique-names-generator": "^4.7.1",

postcss.config.js

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

src/components/app/Nav.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { Button, Popover } from '@nasa-jpl/stellar-svelte';
-
   import AppMenu from '../../components/menus/AppMenu.svelte';
   import type { User, UserRole } from '../../types/app';
   import { getTarget } from '../../utilities/generic';
@@ -24,11 +22,6 @@
 <div class="nav">
   <div class="left">
     <AppMenu {user} />
-    <Button>Help</Button>
-    <Popover.Root>
-      <Popover.Trigger><Button on:click={() => console.log(1)}>Popover</Button></Popover.Trigger>
-      <Popover.Content>Place content for the popover here.</Popover.Content>
-    </Popover.Root>
     <div class="divider" />
     <div class="title st-typography-medium">
       <slot name="title" />

src/css/app.css

@@ -1,7 +1,7 @@
 @import 'tippy.js/dist/tippy.css';
 @import 'toastify-js/src/toastify.css';
 @import 'ag-grid-community/styles/ag-grid.min.css';
-@import '@nasa-jpl/stellar-svelte/styles';
+@import '@nasa-jpl/stellar-svelte/theme';
 
 @import '@fontsource/jetbrains-mono/index.css';
 
@@ -20,6 +20,10 @@
 @import './tooltip.css';
 @import './icon.css';
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /* Inherit fonts for inputs and buttons */
 input,
 button,

tailwind.config.js

@@ -0,0 +1,10 @@
+/* eslint-disable sort-keys */
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./node_modules/@nasa-jpl/stellar-svelte/dist/**/*.{html,js,svelte,ts}', './src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  presets: [require('@nasa-jpl/stellar-svelte/tailwindConfig')],
+};