TailwindCSS-config with generated classnames for justify-items, justify-self, justify-content, align-items, align-self and align-content

tailwind.config.js

function alignContent({ addUtilities, variants }) {
  addUtilities(
    {
      ".align-content-start": {
        "align-content": "flex-start"
      },
      ".align-content-end": {
        "align-content": "flex-end"
      },
      ".align-content-center": {
        "align-content": "center"
      },
      ".align-content-between": {
        "align-content": "space-between"
      },
      ".align-content-around": {
        "align-content": "space-around"
      }
    },
    variants("alignContent")
  );
}

function alignItems({ addUtilities, variants }) {
  addUtilities(
    {
      ".align-items-start": {
        "align-items": "flex-start"
      },
      ".align-items-end": {
        "align-items": "flex-end"
      },
      ".align-items-center": {
        "align-items": "center"
      },
      ".align-items-stretch": {
        "align-items": "stretch"
      },
      ".align-items-baseline": {
        "align-items": "baseline"
      }
    },
    variants("alignItems")
  );
}

function alignSelf({ addUtilities, variants }) {
  addUtilities(
    {
      ".align-self-start": {
        "align-self": "flex-start"
      },
      ".align-self-end": {
        "align-self": "flex-end"
      },
      ".align-self-center": {
        "align-self": "center"
      },
      ".align-self-stretch": {
        "align-self": "stretch"
      },
      ".align-self-auto": {
        "align-self": "auto"
      }
    },
    variants("alignSelf")
  );
}

function justifyContent({ addUtilities, variants }) {
  addUtilities(
    {
      ".justify-content-start": {
        "justify-content": "flex-start"
      },
      ".justify-content-end": {
        "justify-content": "flex-end"
      },
      ".justify-content-center": {
        "justify-content": "center"
      },
      ".justify-content-between": {
        "justify-content": "space-between"
      },
      ".justify-content-around": {
        "justify-content": "space-around"
      }
    },
    variants("justifyContent")
  );
}

function justifyItems({ addUtilities, variants }) {
  addUtilities(
    {
      ".justify-items-start": {
        "justify-items": "flex-start"
      },
      ".justify-items-end": {
        "justify-items": "flex-end"
      },
      ".justify-items-center": {
        "justify-items": "center"
      },
      ".justify-items-stretch": {
        "justify-items": "stretch"
      },
      ".justify-items-baseline": {
        "justify-items": "baseline"
      }
    },
    variants("alignItems")
  );
}

function justifySelf({ addUtilities, variants }) {
  addUtilities(
    {
      ".justify-self-start": {
        "justify-self": "flex-start"
      },
      ".justify-self-end": {
        "justify-self": "flex-end"
      },
      ".justify-self-center": {
        "justify-self": "center"
      },
      ".justify-self-stretch": {
        "justify-self": "stretch"
      },
      ".justify-self-auto": {
        "justify-self": "auto"
      }
    },
    variants("alignSelf")
  );
}

module.exports = {
  corePlugins: {
    // disable the generation of the default classnames for align* and justifyContent
    alignContent: false,
    alignItems: false,
    alignSelf: false,
    justifyContent: false
  },
  plugins: [
    alignContent,
    alignItems,
    alignSelf,
    justifyContent,
    justifyItems,
    justifySelf,
  ]
};