TailwindCSS

Tailwind is an utility css framework which basically instead of writing css rules in separate css files you do styling by adding atomic classses. This idea is quite interesting. I knew Tailwind the first time when learnt about Vue. After using tailwind in several hobby projects I become more and more into this css framework and it becomes my first choice of framework for every project.

Here are 10 things that I love about TailwindCSS

1. Easy styling, if you know CSS then you can start using tailwind right away. the class names are very intuitive.
2. Styles stay with components, because of css stylings couple with markups so basically you do not need to worry about your styles can affect to other parts of the app
3. Consistent measurements. I love the way it puts measures in classes such as p-4, px-4,... which give developers an easy way to make spaces consistently
4. Beautiful and simple typography before tailwind I used to spend hours for design inspirations including typography. Now I am happy with typography I get from tailwind.
5. Easy to choose colors Another thing from tailwind that I appreciate a lot is the list of colors which is popular and I do not need to spend much for color inspirations.
6. Background styling is easy. Gradient background is no brainer to choose.
7. Tailwind also makes animation easier to implement
8. Responsive is never easier with tailwind. it is clear with prefix lg: or md: for styling on multiple screen sizes.
9. Grid is also easy to work with. You have multiple options such as flex, grid and you have width defined by multiple classes such as w-1/12, w-3/12
10. The last thing is not really tailwind but it is a recommendation from tailwind css. It is heroicons which contains many svg icons ready to use in projects