CSS Patterns

https://www.youtube.com/watch?v=CU8Plk-53RU

Stack

/* flex box approach */
.stack {
	display: flex;
	flex-diretion: column;
	gap: var(--stack-gap, 1rem);
}
.card {
	--stack-gap: 1.5rem;
	margin-block-start: auto;
}
/* grid approach */
.stack-grid {
	display: grid;
	align-content: start;
	justify-items: start;
}

Prose

/* for texts flows in a way similar to tailwind css approach */
.prose > * + * {
	margin-block-start: var(--prose-flow, 1em);
}

Pile

/* For instance, for a hero texts */
.pile {
	display: grid;
	grid-template-areas: "pile";
	place-items: center; /* not necessary at all */
	> * { grid-area: pile; }
}