tailwind-flex-plugin.ts

// in tailwind.config.ts
// import flexPlugin from 'path/to/plugin.ts'
// export default {
//   plugins: [flexPlugin]
// }

// usage: flex-<justify> or flex-<justify>-<align>
// ex: flex-between or flex-around-stretch

import plugin from 'tailwindcss/plugin';

export default plugin(({ addUtilities }) => {
  const utilities = {};

  const displayTypes = ['flex', 'inline-flex'];

  const justifyContentValues = {
    start: 'flex-start',
    end: 'flex-end',
    center: 'center',
    between: 'space-between',
    around: 'space-around',
    evenly: 'space-evenly',
  };

  const alignItemsValues = {
    start: 'flex-start',
    end: 'flex-end',
    center: 'center',
    baseline: 'baseline',
    stretch: 'stretch',
  };

  for (const display of displayTypes) {
    for (const [justifyKey, justifyValue] of Object.entries(
      justifyContentValues,
    )) {
      const className = `.${display}-${justifyKey}`;
      utilities[className] = {
        display: display,
        'justify-content': justifyValue,
      };

      // If you want combinations with alignItemsValues as well
      for (const [alignKey, alignValue] of Object.entries(
        alignItemsValues,
      )) {
        const combinedClassName = `.${display}-${justifyKey}-${alignKey}`;
        utilities[combinedClassName] = {
          display: display,
          'justify-content': justifyValue,
          'align-items': alignValue,
        };
      }
    }
  }

  addUtilities(utilities);
});