Flex & Grid

This feature will replace all Tailwind (justify-content, justify-items, justify-self, align-content, align-items, align-self, place-content, place-items, place-self) classes. You will no longer be able to use the original classes.

Justify Content

Class	Properties

Justify Items

Class	Properties

Justify Self

Class	Properties

Align Content

Class	Properties

Align Items

Class	Properties

Align Self

Class	Properties

Place Content

Class	Properties

Place Items

Class	Properties

Place Self

Class	Properties

Usage

Single import

// tailwind.config.js | tailwind.config.ts

import { flexGrid } from "tailwindcss-addons"

export default {
    plugins: [flexGrid],
}

Multi import

// tailwind.config.js | tailwind.config.ts

import { allAddons } from "tailwindcss-addons"

export default {
    plugins: [
        ...allAddons({
            flexGrid: true, // Disabled by default
        }),
    ],
}