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,
},
})