Pretty much, but that concept by itself is underrated. By having all of the CSS inline on your components, the developer doesn't have to click on a class name and find the css file associated with producing that class.
Tailwind is also a design system, so some non-obvious rules like box-shadows, colors, font-sizes are pre-picked. That means instead of remembering what font-size to use for a figure caption, "was it 0.85rem or 0.75rem", you can just use `text-xs`. Design constraint is good here because you get a consistent look throughout your app. It's kind of like having global css variables: by modifying your tailwind.config.js, you can change all `text-xs` to a different font-size now.
And then when you want to break out of that design system, "I need something smaller than a caption, say text-2xs", you can extend tailwind by defining your own atomic class names.
> benefit of using it vs something like bootstrap
Haven't used bootstrap since my first basic website years ago, but it seems like a vanilla js component + css library. Tailwind is primarily a css library, so you can use it with React and Vue as well. The way you install Tailwind is different too: Bootstrap you put into the head of your document and no build step is required; however, with a build step, you can remove unused css to get the minimal working spreadsheet.
Pretty much, but that concept by itself is underrated. By having all of the CSS inline on your components, the developer doesn't have to click on a class name and find the css file associated with producing that class.
Tailwind is also a design system, so some non-obvious rules like box-shadows, colors, font-sizes are pre-picked. That means instead of remembering what font-size to use for a figure caption, "was it 0.85rem or 0.75rem", you can just use `text-xs`. Design constraint is good here because you get a consistent look throughout your app. It's kind of like having global css variables: by modifying your tailwind.config.js, you can change all `text-xs` to a different font-size now.
And then when you want to break out of that design system, "I need something smaller than a caption, say text-2xs", you can extend tailwind by defining your own atomic class names.
> benefit of using it vs something like bootstrap
Haven't used bootstrap since my first basic website years ago, but it seems like a vanilla js component + css library. Tailwind is primarily a css library, so you can use it with React and Vue as well. The way you install Tailwind is different too: Bootstrap you put into the head of your document and no build step is required; however, with a build step, you can remove unused css to get the minimal working spreadsheet.