Logo BABAKFP

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
 
import { flexGrid } from "tailwindcss-addons"
 
export default {
    plugins: [flexGrid],
}

Multi import

// tailwind.config.js
 
import { allAddons } from "tailwindcss-addons"
 
export default {
    plugins: [
        ...allAddons({
            flexGrid: true, // Disabled by default.
        }),
    ],
}
Return to top