tailwind.config.js

import plugin from 'tailwindcss/plugin';

/**
 * 参照: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
 */
const autoGrid = plugin(
	({ addComponents, matchComponents, theme }) => {
		matchComponents(
			{
				'auto-grid': (value) => ({
					display: 'grid',
					'grid-template-columns': `repeat(auto-fill, minmax(min(${value}, 100%), 1fr))`,
				}),
			},
			{
				values: theme('autoGrid'),
			},
		);

		addComponents({
			'.auto-grid-none': {
				display: 'revert',
				'grid-template-columns': 'revert',
			},
		});
	},
	{
		theme: {
			// @ts-ignore
			autoGrid: ({ theme }) => ({
				...theme('flexBasis'),
			}),
		},
	},
);