tailwindcss-axes 🪓🪓

justify-content and align-items are the USB-A properties of flexbox and grid 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

Tailwind v4

Add a @plugin to your CSS:

@plugin "tailwindcss-axes";

Tailwind v3/v4 with config file

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 | Styles | | - | - | | main-axis-start | justify-content: flex-start; | | main-axis-end | justify-content: flex-end; | | main-axis-end-safe | justify-content: safe flex-end; | | main-axis-center | justify-content: center; | | main-axis-center-safe | justify-content: safe 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; | | main-axis-baseline | justify-content: baseline; | | main-axis-normal | justify-content: normal; |

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 | Styles | | - | - | | cross-axis-start | align-items: flex-start; | | cross-axis-end | align-items: flex-end; | | cross-axis-end-safe | align-items: safe flex-end; | | cross-axis-center | align-items: center; | | cross-axis-center-safe | align-items: safe center; | | cross-axis-baseline | align-items: baseline; | | cross-axis-baseline-last | 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.