Classic rock, Mario Kart, and why we can’t agree on Tailwind

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.)

Tailwind is really just a DSL over CSS. Which means you need to know and understand CSS to write it. The syntax is perhaps marginally simpler, although it has its own complexities. The biggest thing you no longer need to worry about is selector specificity, but even that's something I rarely worried about in the first place in CSS.

Everything else - the cascade, the attributes, the units, pseudo-classes, and so on - are all present in Tailwind, and you still need to understand what's going on to use it. And because Tailwind is mostly just a relatively transparent layer over CSS, all your CSS knowledge still applies. So you're not using "someone else's code", because in writing Tailwind styles, you're just writing CSS in a different syntax.

(Whether or not you need that different syntax is another story, and that mainly comes down to how much you use components and partials in your HTML authoring. If you work quite hard on deduplicating your HTML, then Tailwind is useful because your styles end up deduplicated for free alongside the HTML. If you tend to use HTML directly as your content authoring tool, then Tailwind leads to a lot of duplication, and you probably want to use CSS directly.

There's also a difference between naming things of actual significance, which as you say may need to be localized, labeled, etc. and having to name arbitrary CSS junk like .button--state--success, which is painfully annoying. Type it up in the CSS file, switch over to the markup file (another annoyance that Tailwind helps you avoid), paste it in, repeat.