tailwind plugins

plugins.js

/**
 * Generates grid column classes like:
 *
 * - fluid-columns-fill-md
 * - fluid-columns-fill-sm
 * - ...
 * - fluid-columns-fit-md
 * - fluid-columns-fit-sm
 * - ...
 *
 * Use in combination with `grid` for a responsive fluid grid.
 * Uses gap-4 by default, can be overridden
 *
 * `fill` uses auto-fill, `fit` uses auto-fit. [See here for differences](https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/)
 *
 * Configurable with `fluidGridColumns` in tailwind theme config
 *
 * @example
 * <div css={tw`grid fluid-columns-fill-md`}>
 *   {items}
 * </div>
 */
function fluidGridColumnsPlugin() {
  return plugin(({ addUtilities, e, theme }) => {
    addUtilities(
      Object.entries(theme("fluidGridColumns")).map(([name, size]) => ({
        [`.fluid-columns-fill-${e(name)}`]: {
          gridTemplateColumns: `repeat(auto-fill, minmax(${size}, 1fr))`,
          gridGap: theme("space.4"),
        },
        [`.fluid-columns-fit-${e(name)}`]: {
          gridTemplateColumns: `repeat(auto-fit, minmax(${size}, 1fr))`,
          gridGap: theme("space.4"),
        },
      })),
    )
  })
}

/**
 * Generates `size-*` classes for setting both width and height
 * based on existing theme widths
 */
function sizePlugin() {
  return plugin(({ addUtilities, e, theme }) => {
    addUtilities(
      Object.entries(theme("width")).map(([name, size]) => ({
        [`.size-${e(name)}`]: {
          width: size,
          height: size,
        },
      })),
    )
  })
}