Understanding Tailwind
·
2 min read
Recently, an open source project needed an H5 version, so I decided to try Tailwind. Here I’ll mark down my understanding and feelings after using it.
For learning materials, the official website is of course the top recommendation. Here I’ll mainly share my rough understanding.
Positioning
- CSS framework, not a UI component library, and not UI component CSS. For example, it’s not equivalent to Bootstrap.
Usage Methods
- Direct CDN loading of JS is possible, but the downside is full loading, so file size needs to be considered.
- PostCSS plugin form, very convenient to integrate with build tools like Webpack, Vite. This method generates final CSS during the build process, on-demand loading, smaller size.
Characteristics
- Atomic CSS, the advantage is that on-demand use is very comfortable, can combine many styles, the downside is that there will be many class names
- Style names are very semantic, after playing with it more you’ll become familiar and can get started quickly
Actual Projects Used
- Recent mini-program project using Taro+Webpack, Taro supports Tailwind, so it was very convenient to integrate and use.
- For mobile web H5 projects, because Webpack is used, Tailwind can also be integrated.
Tailwind vs Bootstrap
The comparison isn’t quite appropriate, but for beginner users, it’s helpful to understand the differences.
- Bootstrap is a UI component library, meaning the final product is a pre-designed button that follows the Bootstrap design system.
- Tailwind is a CSS utility library, meaning the final product is a set of CSS classes defined semantically, allowing you to build your own buttons in a semantic way.
These two are different tools for different use cases.
Final Thoughts
I personally think Tailwind is simple and pure enough to make it a great CSS framework. In actual projects, it doesn’t interfere with using other UI component library styles, so it’s a great tool that’s indeed suitable for rapid development.
