I recently rebuilt my personal portfolio site and wanted to create a professional-looking site while also trying out a new technology. I heard positive things about Tailwind CSS and decided to give it a shot.
Tailwind is a unique utility CSS library, different from other CSS frameworks. It uses utility classes, which are then translated into CSS through a build process. This eliminates the need for user-written CSS classes, reducing confusion and unnecessary effort in accurately naming classes. Centralization is not an issue with Tailwind, as you never have to change a CSS class without being aware of its effects.
https://cheinrichs.github.io/portfolioSite/
Pros: Tailwind helps resolve issues with centralized CSS theming in larger applications. By using utility classes, it only affects the element it is on, allowing for changes to be made without worrying about affecting other elements. The configuration process is easy and powerful, with most things customizable and standard in the tailwind.config.js file.
Cons: Getting set up with Tailwind can be more involved than with frameworks like Bootstrap, requiring npm or yarn and a build process with minor configuration. The verbosity of utility classes can get out of hand, especially when adding screen size, hover states, animation, and other CSS elements to an element. Understanding each CSS class is important, as changing similar elements in different places can be time-consuming and less accurate. The Tailwind Component Library is great, but it is also expensive, which may impact future project decisions.
Overall, Tailwind is well suited for ad hoc development and creating unique layouts. However, it works best with a front-end framework that organizes code into components, as the verbosity of utility classes can be overwhelming without proper organization. Reusing components helps streamline the process and makes Tailwind a strong choice for projects.
cooperheinrichs 
Leave a comment