refactor(web): add tailwind plugin for repeating grid cols (#11748)

web/eslint.config.mjs

@@ -32,7 +32,7 @@ export default [
       '**/svelte.config.js',
       'eslint.config.mjs',
       'postcss.config.cjs',
-      'tailwind.config.cjs',
+      'tailwind.config.js',
     ],
   },
   ...compat.extends(

web/src/lib/components/album-page/album-card-group.svelte

@@ -50,7 +50,7 @@
 
 <div class="mt-4">
   {#if !isCollapsed}
-    <div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] gap-y-4" transition:slide={{ duration: 300 }}>
+    <div class="grid grid-auto-fill-56 gap-y-4" transition:slide={{ duration: 300 }}>
       {#each albums as album, index (album.id)}
         <a
           data-sveltekit-preload-data="hover"

web/src/lib/components/shared-components/search-bar/search-camera-section.svelte

@@ -52,7 +52,7 @@
 <div id="camera-selection">
   <p class="immich-form-label">{$t('camera').toUpperCase()}</p>
 
-  <div class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-5 mt-1">
+  <div class="grid grid-auto-fit-40 gap-5 mt-1">
     <div class="w-full">
       <Combobox
         label={$t('make')}

web/src/lib/components/shared-components/search-bar/search-date-section.svelte

@@ -12,7 +12,7 @@
   export let filters: SearchDateFilter;
 </script>
 
-<div id="date-range-selection" class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-5">
+<div id="date-range-selection" class="grid grid-auto-fit-40 gap-5">
   <label class="immich-form-label" for="start-date">
     <span>{$t('start_date').toUpperCase()}</span>
     <DateInput

web/src/lib/components/shared-components/search-bar/search-location-section.svelte

@@ -69,7 +69,7 @@
 <div id="location-selection">
   <p class="immich-form-label">{$t('place').toUpperCase()}</p>
 
-  <div class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-5 mt-1">
+  <div class="grid grid-auto-fit-40 gap-5 mt-1">
     <div class="w-full">
       <Combobox
         label={$t('country')}

web/src/lib/components/shared-components/search-bar/search-people-section.svelte

@@ -61,7 +61,7 @@
       </div>
 
       <SingleGridRow
-        class="grid grid-cols-[repeat(auto-fill,minmax(5rem,1fr))] -mx-1 gap-1 mt-2 overflow-y-auto immich-scrollbar"
+        class="grid grid-auto-fill-20 -mx-1 gap-1 mt-2 overflow-y-auto immich-scrollbar"
         bind:itemCount={numberOfPeople}
       >
         {#each peopleList as person (person.id)}

web/src/routes/(user)/explore/+page.svelte

@@ -53,10 +53,7 @@
           draggable="false">{$t('view_all')}</a
         >
       </div>
-      <SingleGridRow
+      <SingleGridRow class="grid md:grid-auto-fill-28 grid-auto-fill-20 gap-x-4" let:itemCount>
-        class="grid md:grid-cols-[repeat(auto-fill,minmax(7rem,1fr))] grid-cols-[repeat(auto-fill,minmax(5rem,1fr))] gap-x-4"
-        let:itemCount
-      >
         {#each people.slice(0, itemCount) as person (person.id)}
           <a href="{AppRoute.PEOPLE}/{person.id}" class="text-center">
             <ImageThumbnail circle shadow url={getPeopleThumbnailUrl(person)} altText={person.name} widthStyle="100%" />
@@ -77,10 +74,7 @@
           draggable="false">{$t('view_all')}</a
         >
       </div>
-      <SingleGridRow
+      <SingleGridRow class="grid md:grid-auto-fill-36 grid-auto-fill-28 gap-x-4" let:itemCount>
-        class="grid md:grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] grid-cols-[repeat(auto-fill,minmax(7rem,1fr))] gap-x-4"
-        let:itemCount
-      >
         {#each places.slice(0, itemCount) as item (item.data.id)}
           <a class="relative" href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ city: item.value })}" draggable="false">
             <div class="flex justify-center overflow-hidden rounded-xl brightness-75 filter">

web/tailwind.config.js

@@ -1,5 +1,7 @@
+import plugin from 'tailwindcss/plugin';
+
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   darkMode: 'class',
   theme: {
@@ -34,4 +36,19 @@ module.exports = {
       },
     },
   },
+  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') },
+      );
+    }),
+  ],
 };