4 ms·
Tailwind CSS is a JavaScript library that produces css with utility classes that allows you to build a consistent look and feel in your web page. Unlike Bootstr
by snorremd 7y ago
Tailwind CSS is a JavaScript library that produces css with utility classes that allows you to build a consistent look and feel in your web page. Unlike Bootstrap which exposes components like buttons, cards, input elements, and other components, Tailwind CSS gives you utility classes that handle padding, margins, colours, shadow, etc. Typing in Tailwind CSS utility classes feels very much like writing CSS. Each utility, e.g. mr (margin right), comes in various forms including sizing and with media queries. So mr-4, sm:mr-2, etc.
The value of the Tailwind CSS library lies in its templating and plugin system. You can very easily change what mr-2 means. You define it once in your template and it affects your entire app.
If you see repeated components in your app you can opt to create css components using Tailwind's JavaScript based configuration, though you can just as easily create the component as a React, Vue, or Angular component.
I used Tailwind CSS in a project and my favourite thing about it was how little I had to fight with Tailwind to get things to look the way I wanted. Tailwind does not dictate what kind of components you can build, it simply gives you good base utilities. With bootstrap you will need to build components from scratch as soon as you need something different from the ones that bootstrap has provided. And if you want a navigation bar, but want it to look slightly different you will have to try to override Bootstrap's css somehow.
Tailwind UI is simply a collection of finished Tailwind CSS components that demonstrate useful compositions of html and various tailwind utility classes to build common components. Instead of figuring out how to build a navigation menu yourself using Tailwind utility classes you can simply copy the example in Tailwind UI and customise it if you want.
Edit: Tailwind CSS only produces CSS. It does not provide any JavaScript for you components. That you will need to build yourself. There is no Tailwind.js to run in your browser to handle multi-select dropdown inputs, etc.
- wdb 7y agoPersonally, I don’t like the utility classes aspect of Tailwind. I can’t explain why but it feels wrong. I know it’s silly but it’s a feeling
- adyus 7y agoYou might be thinking of utility classes as the finished product. They're incredibly useful for quickly prototyping and "jiggling" things until they look good. Once that's done, the utility classes can be extracted to reusable CSS via the `@apply` directive.