Tailwind CSS v4+ utility to create a responsive column layout

tailwind.css

/* 
 * Create a fully responsive column layout while defining the max width of the columns.
 * On small screens, columns width will be the min between 100% and the defined width.
 *
 * Add `--col-size` and / or `--col-size-*` variables to your tailwind theme for customization
 * Ex:
 *  ```
 *    --col-size: 320px;
 *    --col-size-xl: 448px;
 *    --col-size-wathever: 1024px;
 */

@utility auto-fit-cols-* {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, --value([dimension])), 1fr));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, --value(percentage)), 1fr));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, --value([percentage])), 1fr));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(--value(number) * --spacing(1))), 1fr));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, --value(--col-size-*)), 1fr));
}

@utility auto-fit-cols {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-size, 320px)), 1fr)); /* defaults to 320px column width if no `--col-size` variable is defined */
}

/* Use it like this: `grid auto-fit-cols-40` (40 * 4px = 160px column width if using default spacing) or `grid gap-2 auto-fit-cols-[10rem]` for example */