A History Lesson
Some saw the trend as an opportunity to formalize collections of web components, as in pre-styled and interactive buttons, modals, "hamburgers," etc.
While there are official Tailwind UI components, these are, in essence, examples of idiomatic Tailwind CSS usage for common use cases. They're not meant to be a replacement for working with CSS, instead intended as a guide for doing so. This differs from other component collections where change and adjustment from the norm are quite painful.
Thankfully, Tailwind simplifies and accelerates working with CSS by training users to, well, use it as intended. It's okay to have some inline styles, but generally these styles should belong to classes as to mitigate redundancy. Tailwind brands itself "utility-first," furnishing an adequately-named class for each corresponding style. Therefore, Tailwind instills the good practice of using and composing classes.
Here are examples of such style-class equivalences:
flex: 1 1 auto→
Based on those examples, I bet you can figure out what this means:
With the help of the aforementioned preprocessing, it's also possible to compose classes in another like so:
@apply antialiased text-gray-500 bg-gray-900;
This is the core of what I love so much about this framework, but that's not all.
The user can configure spacing and the color palette to their heart's content, although the defaults are nice. Breakpoints are as simple as prepending a size at which they activate, such as
md: (medium), to a class. There are some interesting new features as of Tailwind CSS v2.0, including utilities for focus rings, gradients and animations. Tailwind CSS packs in a lot of features, so much so that it can be quite hefty if you don't optimize for production. Remember, there's never a good reason for including unused styles!
If you're just getting started, you may want to check out my Eleventy template, 11r, that is dependent on Tailwind. Playing around with that template may help you learn the framework, and maybe some other stuff too. Regardless, definitely visit the official docs if you're interested in learning more. After all, this website was built with Tailwind CSS! If it's good enough for me, it must be good enough for you, right?