Using tailwind instead of scss as much as possible

tailwind.config.js

@@ -0,0 +1,37 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{html,ts}'],
+  darkMode: 'class',
+  corePlugins: { preflight: false },
+  theme: {
+    extend: {
+      colors: {
+        'app-bg': 'var(--app-bg)',
+        'app-fg': 'var(--app-fg)',
+        'card-bg': 'var(--card-bg)',
+        'link': 'var(--link-color)',
+        'link-hover': 'var(--link-color-hover)',
+        'logo-bg': 'var(--app-logo-bg)',
+      },
+      maxWidth: {
+        'app': 'var(--app-maxWidth)',
+      },
+      borderRadius: {
+        'card': 'var(--card-radius)',
+      },
+      fontFamily: {
+        'sans': ['Inter', 'Roboto', 'Arial', 'sans-serif'],
+      },
+      spacing: {
+        'fluid-sm': 'clamp(0.5rem, 2vw, 1rem)',
+        'fluid-md': 'clamp(1rem, 3vw, 1.5rem)',
+        'fluid-lg': 'clamp(1rem, 4vw, 2rem)',
+      },
+      screens: {
+        'mobile': { 'max': '760px' },
+        'sm-dialog': { 'max': '600px' },
+        'tablet': { 'max': '900px' },
+      },
+    },
+  },
+};