fix: tailwind issues (#18528)

fix: tailwind issues (maybe)

web/src/app.css

@@ -1,9 +1,8 @@
 @import 'tailwindcss';
 @import '@immich/ui/theme/default.css';
+@source "../node_modules/@immich/ui";
 /* @import '/usr/ui/dist/theme/default.css'; */
 
-@config '../tailwind.config.js';
-
 @utility immich-form-input {
   @apply rounded-xl bg-slate-200 px-3 py-3 text-sm focus:border-immich-primary disabled:cursor-not-allowed disabled:bg-gray-400 disabled:text-gray-100 dark:bg-gray-600 dark:text-immich-dark-fg dark:disabled:bg-gray-800 dark:disabled:text-gray-200;
 }
@@ -27,8 +26,48 @@
   scrollbar-gutter: stable both-edges;
 }
 
+@utility grid-auto-fit-* {
+  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--spacing) * --value(number)), 100%), 1fr));
+}
+
+@utility grid-auto-fill-* {
+  grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--spacing) * --value(number)), 100%), 1fr));
+}
+
 @custom-variant dark (&:where(.dark, .dark *));
 
+@theme inline {
+  --color-immich-primary: rgb(var(--immich-primary));
+  --color-immich-bg: rgb(var(--immich-bg));
+  --color-immich-fg: rgb(var(--immich-fg));
+  --color-immich-gray: rgb(var(--immich-gray));
+  --color-immich-error: rgb(var(--immich-error));
+  --color-immich-success: rgb(var(--immich-success));
+  --color-immich-warning: rgb(var(--immich-warning));
+
+  --color-immich-dark-primary: rgb(var(--immich-dark-primary));
+  --color-immich-dark-bg: rgb(var(--immich-dark-bg));
+  --color-immich-dark-fg: rgb(var(--immich-dark-fg));
+  --color-immich-dark-gray: rgb(var(--immich-dark-gray));
+  --color-immich-dark-error: rgb(var(--immich-dark-error));
+  --color-immich-dark-success: rgb(var(--immich-dark-success));
+  --color-immich-dark-warning: rgb(var(--immich-dark-warning));
+}
+
+@theme {
+  --font-immich-mono: Overpass Mono, monospace;
+
+  --spacing-18: 4.5rem;
+
+  --breakpoint-tall: 800px;
+  --breakpoint-2xl: 1535px;
+  --breakpoint-xl: 1279px;
+  --breakpoint-lg: 1023px;
+  --breakpoint-md: 767px;
+  --breakpoint-sm: 639px;
+  --breakpoint-sidebar: 850px;
+}
+
 @layer base {
   :root {
     /* light */

web/tailwind.config.js

@@ -1,63 +0,0 @@
-import plugin from 'tailwindcss/plugin';
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    './src/**/*.{html,js,svelte,ts}',
-    './node_modules/@immich/ui/dist/**/*.{svelte,js}',
-    '../../ui/src/**/*.{html,js,svelte,ts}',
-  ],
-  theme: {
-    extend: {
-      colors: {
-        // Light Theme
-        'immich-primary': 'rgb(var(--immich-primary) / <alpha-value>)',
-        'immich-bg': 'rgb(var(--immich-bg) / <alpha-value>)',
-        'immich-fg': 'rgb(var(--immich-fg) / <alpha-value>)',
-        'immich-gray': 'rgb(var(--immich-gray) / <alpha-value>)',
-        'immich-error': 'rgb(var(--immich-error) / <alpha-value>)',
-        'immich-success': 'rgb(var(--immich-success) / <alpha-value>)',
-        'immich-warning': 'rgb(var(--immich-warning) / <alpha-value>)',
-
-        // Dark Theme
-        'immich-dark-primary': 'rgb(var(--immich-dark-primary) / <alpha-value>)',
-        'immich-dark-bg': 'rgb(var(--immich-dark-bg) / <alpha-value>)',
-        'immich-dark-fg': 'rgb(var(--immich-dark-fg) / <alpha-value>)',
-        'immich-dark-gray': 'rgb(var(--immich-dark-gray) / <alpha-value>)',
-        'immich-dark-error': 'rgb(var(--immich-dark-error) / <alpha-value>)',
-        'immich-dark-success': 'rgb(var(--immich-dark-success) / <alpha-value>)',
-        'immich-dark-warning': 'rgb(var(--immich-dark-warning) / <alpha-value>)',
-      },
-      fontFamily: {
-        'immich-mono': ['Overpass Mono', 'monospace'],
-      },
-      spacing: {
-        18: '4.5rem',
-      },
-      screens: {
-        tall: { raw: '(min-height: 800px)' },
-        'max-2xl': { max: '1535px' },
-        'max-xl': { max: '1279px' },
-        'max-lg': { max: '1023px' },
-        'max-md': { max: '767px' },
-        'max-sm': { max: '639px' },
-        sidebar: { min: '850px' },
-      },
-    },
-  },
-  plugins: [
-    plugin(({ matchUtilities, theme }) => {
-      matchUtilities(
-        {
-          'grid-auto-fit': (value) => ({
-            gridTemplateColumns: `repeat(auto-fit, minmax(min(${value}, 100%), 1fr))`,
-          }),
-          'grid-auto-fill': (value) => ({
-            gridTemplateColumns: `repeat(auto-fill, minmax(min(${value}, 100%), 1fr))`,
-          }),
-        },
-        { values: theme('width') },
-      );
-    }),
-  ],
-};