Tailwind is an unrelated project, that’s just used by this one.

Basically, TailwindCSS is a combination of two things:

1. A huge set of “utility” CSS classes that apply consistent, basic styles, with tons of handy conventions for stuff like colors, shadows, border-radii, spacing - and it even lets you target them to hover state, active state, disabled state, users with prefers-color-scheme set to dark, etc.
2. A JIT-compiled system of creating one-off CSS by just writing the name of a not-yet-existent utility class.

The main benefits, I find, are mostly:

• Keeping your style controls directly present in the HTML, without needing to remember conventions or arbitrary “semantic” names for things.
• Consistency in convention. Need a color? There’s a set (configurable) list of them. text-green-500 and you suddenly have green text with a middle-of-the-road luminosity. Need spacing? Use one of the padding or margin utilities, and you’ll have consistent spacing based on a convention. py-4 and you know you get “level 4” padding without having to care what the exact pixel amount is. But! You know it’s the same as everywhere else you’ve done py-4. No need to go fiddle with a stylesheet.

Tailwind focuses on coupling your styling to your HTML by using tiny, focused, glanceable utility classes (<div></div>) rather than by needing to create a ton of potentially-confusing “semantic” classes^[1] (<div></div>).

There are tons of classes in it, and I’ve found it to be super useful. Want to center something, horizontally and vertically? Here’s how in Tailwind:

<div>
    <div>I'm centered!</div>
</div>

And if you need a one-off specific setup - something like display: grid; grid-template-columns: 30px 1fr 1fr 20px, you can do it with the JIT as such: `