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
jc-start	justify-content: flex-start;
jc-end	justify-content: flex-end;
jc-center	justify-content: center;
jc-between	justify-content: space-between;
jc-around	justify-content: space-around;
jc-evenly	justify-content: space-evenly;

Justify Items

Class	Properties
ji-start	justify-items: start;
ji-end	justify-items: end;
ji-center	justify-items: center;
ji-stretch	justify-items: stretch;

Justify Self

Class	Properties
js-auto	justify-self: auto;
js-start	justify-self: start;
js-end	justify-self: end;
js-center	justify-self: center;
js-stretch	justify-self: stretch;

Align Content

Class	Properties
ac-center	align-content: center;
ac-start	align-content: flex-start;
ac-end	align-content: flex-end;
ac-between	align-content: space-between;
ac-around	align-content: space-around;
ac-evenly	align-content: space-evenly;

Align Items

Class	Properties
ai-start	align-items: flex-start;
ai-end	align-items: flex-end;
ai-center	align-items: center;
ai-baseline	align-items: baseline;
ai-stretch	align-items: stretch;

Align Self

Class	Properties
as-auto	align-self: auto;
as-start	align-self: flex-start;
as-end	align-self: flex-end;
as-center	align-self: center;
as-stretch	align-self: stretch;
as-baseline	align-self: baseline;

Place Content

Class	Properties
pc-center	place-content: center;
pc-start	place-content: start;
pc-end	place-content: end;
pc-between	place-content: space-between;
pc-around	place-content: space-around;
pc-evenly	place-content: space-evenly;
pc-stretch	place-content: stretch;

Place Items

Class	Properties
pi-start	place-items: start;
pi-end	place-items: end;
pi-center	place-items: center;
pi-stretch	place-items: stretch;

Place Self

Class	Properties
ps-auto	place-self: auto;
ps-start	place-self: start;
ps-end	place-self: end;
ps-center	place-self: center;
ps-stretch	place-self: stretch;

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 tailwindcssAddons from "tailwindcss-addons"

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