tailwindcss-axes 🪓🪓

justify-content and align-items are the USB-A properties of flexbox layout.

This Tailwind CSS plugin adds main-axis-* and cross-axis-* utilities for them to help you avoid trying to plug them in the wrong way.

Installation

Install the plugin:

npm install -D tailwindcss-axes

Add the plugin to your tailwind.config.js file:

module.exports = {
  plugins: [
    require('tailwindcss-axes'),
  ],
}

Documentation

Main Axis Alignment

Utilities for controlling how flex and grid items are positioned along a container's main axis - see the Tailwind CSS Justify Content docs for layout examples.

Class	Properties
main-axis-normal	justify-content: normal;
main-axis-start	justify-content: flex-start;
main-axis-end	justify-content: flex-end;
main-axis-center	justify-content: center;
main-axis-between	justify-content: space-between;
main-axis-around	justify-content: space-around;
main-axis-evenly	justify-content: space-evenly;
main-axis-stretch	justify-content: space-stretch;

Cross Axis Alignment

Utilities for controlling how flex and grid items are positioned along a container's cross axis - see the Tailwind CSS Align Items docs for layout examples.

Class	Properties
cross-axis-start	align-items: flex-start;
cross-axis-end	align-items: flex-end;
cross-axis-center	align-items: center;
cross-axis-baseline	align-items: baseline;
cross-axis-first-baseline	align-items: first baseline;
cross-axis-last-baseline	align-items: last baseline;
cross-axis-stretch	align-items: stretch;

See this web.dev blog post for layout examples of first baseline and last baseline alignment.