UX: use more parts of Tailwind (see #2106), more tweaking of the menu bar

tailwind.config.cjs

@@ -1,8 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 const plugin = require("tailwindcss/plugin")
+const flowbitePlugin = require("flowbite/plugin")
 
 module.exports = {
-  content: ["./**/*.{html,ts,svelte}"],
+  content: ["./**/*.{html,ts,svelte}", './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
+
   theme: {
     extend: {
       maxHeight: {
@@ -12,10 +14,24 @@ module.exports = {
       colors: {
         subtle: "#dbeafe",
         unsubtle: "#bfdbfe",
+          // flowbite-svelte
+          primary: {
+            50: '#FFF5F2',
+            100: '#FFF1EE',
+            200: '#FFE4DE',
+            300: '#FFD5CC',
+            400: '#FFBCAD',
+            500: '#FE795D',
+            600: '#EF562F',
+            700: '#EB4F27',
+            800: '#CC4522',
+            900: '#A5371B'
+        }
       },
     },
   },
   plugins: [
+    flowbitePlugin,
     plugin(function ({ addVariant, e }) {
       addVariant("landscape", ({ modifySelectors, separator }) => {
         modifySelectors(({ className }) => {