Tailwind Utilities

grid-auto-cols-plugin.js

const plugin = require("tailwindcss/plugin");

/**
 * Establish automatic `grid-template-columns` with dynamically
 * adjusting columns. The minimum width of each column is the value
 * passed to the utility, and the maximum is `1fr`.
 */
const gridAutoColsPlugin = plugin(({ matchUtilities, theme }) => {
	matchUtilities(
		{
			"grid-auto-cols": (value) => ({
				gridTemplateColumns: `repeat(auto-fit,minmax(${value},1fr))`,
			}),
		},
		{
			values: theme("spacing"),
		},
	);
});

size-plugin.js

const plugin = require("tailwindcss/plugin");

/**
 * Set both size and width to the same value with the single
 * `size` utility.
 */
const sizePlugin = plugin(({ matchUtilities, theme }) => {
	matchUtilities(
		{
			size: (value) => ({
				height: value,
				width: value,
			}),
		},
		{
			values: theme("spacing"),
		},
	);
});

Writing Tailwind Plugins in Typescript.md

Writing Tailwind Plugins in Typescript

If you are writing a tailwind plugin in typescript tailwind file (tailwind.config.ts), you have to use the plugin() function. At time of writing, there seems to be a bug where if you try to use your IDEs auto import to get this function, it imports as the default export of the tailwindcss package:

import plugin from "tailwindcss";

This is wrong, and if you try to write a plugin with this import you will get type errors, since you have not in fact plugin function. To fix this, you just need to import it from tailwindcss/plugin:

import plugin from "tailwindcss/plugin";