Isn't all that p-1, p-2, p-3, ... stuff just like a grid system, that we already had in bootstrap? With modern CSS, I don't think such a rigid system doing size by convention is needed. Make elements resize based on their content and available space. Maybe have a min-width or min-height in some places, but why would one ever go like: "OK this is 3 parts wide, so the rest still has 9 parts left." or similar?

To a certain extent yes, but really no.

Tailwind is basically just a DSL for CSS. You write these Tailwind classes like "pl-4" or "items-center" and the compiler converts these into real CSS like "padding-left: 16px" or "align-items: center". You can even write arbitrary CSS using square brackets, although the syntax starts getting a bit messier: "pl-[33%]" will convert to "padding-left: 33%", so you really can use whatever arbitrary units and styles you want. So no, it's not particularly like Bootstrap, because Bootstrap is a set of predetermined base styles and components, whereas Tailwind is just a DSL for doing whatever you want to do in CSS but in a different syntax.

There is a similarity in that Tailwind provides a number of default lengths, colours, etc for you to use - the "2" in "p-2". These can be used as-is, although in most serious projects, you'll end up adjusting these based on the standard widths coming from your designer. So for example, you might have a 5px scale, in which p-1 represents a scale of 5px, p-2 is 10px, etc. In this sense, Tailwind is reminiscent of CSS frameworks like Bootstrap, but it's more similar to using CSS variables, or having a set of SCSS theme variables - you can use these values in a variety of ways, and there's always the opportunity to just use the raw CSS value syntax with the square brackets.

Specifically with the grid example, Tailwind doesn't come with any grid baked in, but you can easily access flexbox (e.g. "flex flex-column items-end" for a vertical flex with items aligned at the end), or CSS grid as you need them, so you're using all the tricks of modern CSS that you'd expect, including very flexible, resizeable layouts.

It really helps to think of Tailwind as just a DSL for CSS-in-HTML. Anything you can write with CSS, you can write with Tailwind, just differently. As to whether you need that DSL, it mainly comes down to how separate you want your CSS from your templates. In my experience, the further away my CSS is from my templates, the more like spaghetti they become, so keeping them close together helps a lot. And for deduplication, I can just use whatever tools I was using to deduplicate my HTML - partials, components, loops, etc.

(That said, I tend to find that I prefer writing CSS modules, although I do tend to create lots of utility classes there so that I can have consistent padding widths/colours, etc, so my CSS tends to have a bit of a Tailwind vibe to it.)

The default REM scaling is one of my main gripes about Tailwind.

What don't you like about it? Anyways if you don't like it they now have the option to very easily break out of the scaling system by writing like so: p-[4px]. Can use whatever CSS units you want within the square brackets.