Package Exports

tailwindcss-axes
tailwindcss-axes/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-axes) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.