@jvanderen1 that looks perfect 🥹. May the powers that be add this to tailwind 🙏

Looks like my PR was closed today. However, I'll be look into making a plugin 👍🏻.

if you ever got to making this a plugin please let us know, I am very interested to try it out.

This works for me. Modify as needed 🙂

extend: {

  gridTemplateColumns: (theme) => {

    const spacing = theme("spacing");



    return Object.keys(spacing).reduce((accumulator, spacingKey) => {

      return {

        ...accumulator,

        [`fill-${spacingKey}`]: `repeat(auto-fill, minmax(${spacing[spacingKey]}, 1fr))`,

      };

    }, {});

  },

},

This is gold great idea.

i tried doing this but it seems to not pick up my fill-28.

is there something I'm doing wrong here?

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {
            gridTemplateColumns: (theme) => {
                const spacing = theme('spacing')
                console.log('spacing', spacing)
                return Object.keys(spacing).reduce(
                    (accumulator, spacingKey) => {
                        return {
                            ...accumulator,
                            [`fill-${spacingKey}`]: `repeat(auto-fill, minmax(${spacing[spacingKey]}, 1fr))`,
                        }
                    },
                    {},
                )
            },
...