Creating a Bootstrap-like grid system in TailwindCSS

[rozsazoltan]

I'm not very familiar with Bootstrap anymore - it's been a long time. I came across a question on Stack Overflow, and with TailwindCSS v4's @utility, I was able to extend the system with the requested classes very easily. Leaving it here in case it helps someone else:

• Creating a Bootstrap-like grid system in TailwindCSS

@utility row {
  --col-num: 12;
  display: flex;
  flex-wrap: wrap;
}
@utility cols-* {
  &.row {
    --col-num: --value(integer);
  }
}
@utility col-* {
  &:where(.row > *) {
    flex: 0 0 calc((100% / var(--col-num)) * --value(integer));
    max-width: calc((100% / var(--col-num)) * --value(integer));
    padding: 0 calc(var(--spacing) * 2);
  }
}

• Tailwind Play