Tailwind as explained in their official website is a utility-first CSS framework packed with classes like `flex, pt-4, text-center` and `rotate-90` that can be composed to build any design, directly in your markup. As a beginner writing pure CSS was very good since it helped in understanding and memorizing the rules needed to achieve a specific layout. I had a lot of experience in doing this, however, none brought me the satisfaction and productivity boost that TailwindCSS has. Tailwind has a very basic syntax. Here is an example of how it looks like: ```html

``` Each class represents a CSS declaration. In the example above `pt-6` represents `padding-top: 1.5rem;` This will generate the following: ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/si37y3zmeezuqln2t57f.png) Tailwind has a myriad of benefits compared to custom CSS ### Some of the things I found interesting about Tailwind are: ### No need to leave your HTML code Writing code in one place can be faster and more interesting other than jumping from files to files, this can help to focus more on the task at hand. At times this may become messy especially when working on large projects. ### Smaller Styles Tailwind guarantees a consistent bundle size since utility class names can be shared between elements. For unused CSS, Tailwind is paired with purge CSS this removes extra classes on the codebase. ### Higher Productivity Writing Tailwind CSS is much faster compared to writing CSS or CSS-in-JS. Text editors and IDEs automatically helps us with the autocomplete and formatting, however, in order to trigger the autocomplete we have to write the selectors and pieces of declarations. In addition, variants in Tailwind have prefixes which can be added to classes, representing a specific CSS pseudo-class or custom plugins. ### Consistency Also, Tailwind has a lot of pre-built classes mainly for sizing and coloring, this will reduce or completely remove the need to implement a design system. ### Customization Developers can extend or modify classes in the `tailwind.config.js` file. One can tamper right into Tailwind and can also add custom plugins , changes made will be reflected in the final stylesheet. Inside this file, one can create normal CSS classes. # Tailwind Drawbacks ### Some of the things I may disagree with Tailwind: ### Readability When a considerate amount of classes are added to an element, it may become daunting to read. With correct component abstractions this can be easily solved. ### Complex Animations Archiving complex animations is very hard. One would have to create a class for each element in order to use plain CSS, this will end up in doing more work. Use of libraries can also be used to solve this. Some CSS properties are not included. ## My Final Thoughts In my journey Tailwind has helped in increasing my productivity, reducing the bundle size of my apps and made me more consistent. Although it may have worked well for me and many other developers, it doesn't mean it is the perfect solution for every project. Us front-end developers as long as we guarantee maintainability, scalability, and performance, Tailwind is definitely the best solution considering its myriad of benefits.

berack

Why I switched from normal CSS to Tailwind CSS

Join Our Newsletter. No Spam, Only the good stuff.