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.

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;

How to enable it?

By activating this option, you will no longer be able to use the previous classes, for example: items-center, and justify-center. If you were using the old classes, your site may crash and Tailwind will throw you an error.

tailwindcssAddons({
	utilities: {
		flexGrid: true,
	},
})
Return to top