What is Tailwind CSS
Tailwind CSS is a CSS framework that contains many CSS classes that ready to use to style our HTML elements.
Reasons to use Tailwind CSS
Tailwind CSS is different with Bootstrap that provides many UI components. It's so low-level because only contains many CSS classes.
With Tailwind CSS, we can use that classes to avoid the usage of arbitrary values we often use when writing CSS so we can create style that more consistent.
Basically, we can implement the class to HTML elements immediately without the needs of writing CSS in different files. We can also implement media query for responsive design, interaction like hover and focus, and also dark mode immediately by implementing CSS classes to our HTML elements.
In production, Tailwind CSS automatically removes all unused CSS classes it has that we don't used and most Tailwind projects ship less than 10kb of CSS file so it will be faster to load by visitor web browser.
We can also customize Tailwind CSS as our needs. For example, we can customize typography, color palette, and spacing as our choice, we can implement it inside configuration file that already provided. That is tailwind.config.js.
To support the development process, officially, Tailwind CSS provide an extension for Visual Studio Code. With this, we have autocomplete suggestions when using Tailwind CSS classes in HTML elements.
Using Tailwind CSS
After installation and configuration of Tailwind CSS, we can immediately use the provided CSS classes for implementation in our HTML elements.
Is with Tailwind CSS I don't need to learn about CSS fundamentals ? of course not. It's better to learn CSS fundamentals first then learn about Tailwind CSS. So that we can know what kind of style that we need to implement when working on the UI designs.
Even though we can implement the style only using CSS classes that provided by Tailwind CSS, Sometimes we need to implement inline-styles or custom classes when working on the inconsistent UI designs.
Conclusion
I always using Tailwind CSS when implementing style in the projects at work. Because I feel more productive. I don't need to think about naming when create a new class and also not to confuse about optimization. Give yourself a chance to use Tailwind CSS and feel the benefits of it.