1 – Easy to Learn
TailwindCSS is easy to learn if you have learned the core concepts of CSS. You must know about CSS box modal, positioning, flexbox, etc. before starting to learn Tailwind. All the classes in TailwindCSS are just properties of CSS, you don’t have to remember them at all. Additionally, you can use VS Code Extension for Tailwind classes which is very helpful when working with TailwindCSS.
2 – Reusability
TailwindCSS uses a utility-first approach which makes the classes more useable compared to writing custom CSS. Classes like px-4 justify-between and many others are super useful to add paddings, margins, flexbox, and so on.
3 – Easy Responsiveness
Writing media queries is hard and writing for every single page is very hard to maintain later. With TailwindCSS, you don’t have to worry about responsive classes anymore because it provides classes like md:flex lg:flex-row sm:mr-20 etc. that can do a lot for you. If you use TailwindCSS, you will not have to switch to CSS files for adding media queries. Additionally, Tailwind also gives you a config file to change the targetted screen sizes for different devices.
4 – Customized Design
Using TailwindCSS you are in control of all the customization you want. You can add custom fonts, change targetted screen sizes for different devices, create styles for headings, add custom colors, gradient backgrounds, and so on. You can set pretty much anything you want in your project.
5 – Code Less Achieve More
If you write custom CSS in your project, you will end up writing classes for each and every single thing. Writing media queries for every single page increases the CSS code and files as the project scale. With TailwindCSS, because of utility classes that you can use everywhere, you are not going to add more and more code to each page. Instead, you will be using utility classes everywhere to achieve more with less code.
6 – Easy to Maintain
If you work on a large project, writing and maintaining CSS is hard. Different developers use different approaches with CSS. Even SASS and SCSS are not as useful as TailwindCSS in maintaining CSS code. If you are working with TailwindCSS, every developer will be using TailwindCSS classes and it’s easy to maintain because you don’t have multiple CSS files for responsiveness and other stuff like CSS variables.
7 – Design System
In the modern world of web design, you are going to follow a design from Figma or Adobe XD. All the UI UX designers are using a design system for website designs. When you start working to convert design files into a working website, you can add all the configurations to the tailwind config (tailwind.config.js) file. This makes your work a lot easier than writing custom CSS with variables for colors, fonts, etc.
8 – Productivity
If you write custom CSS in your project, you always have to switch between HTML and CSS files. This decreases productivity in work because you have to search for the right line in the right file to edit. With TailwindCSS, you are writing everything in HTML files and not switching to CSS files, it increases your productivity and focus.
9 – Dark Mode
Dark mode is so popular nowadays, and the trend of adding a dark mode to websites is going up every year. With TailwindCSS, you can add dark mode with two simple steps, first, you have to add theme configuration and second dark mode classes with dark: variants. Using custom CSS, it’s hard to add dark mode as compared to TailwindCSS.
10 – No Unused CSS Code
Ever design something you didn’t use after the requirements were changed? This happens a lot in web design and most of the time, developers don’t remove CSS code because they think it might be useful someday. This unused code increases the size of CSS files and makes the web pages slow in loading. When working with TailwindCSS, you don’t have to worry about unused code in the CSS files. JIT (Just In Time) is always watching for your changes and removes the styles quickly when you remove classes from HTML. In the end, when you build CSS for production, it will be so small in size and makes the web pages load faster.
Conclusion
There are many benefits of using TailwindCSS. It supports dark mode, gives control in customization, increases productivity, and it’s easy to maintain. If you have learned core concepts of CSS, you must try TailwindCSS instead of component-based frameworks like bootstrap. TailwindCSS will make your life a lot easier when designing custom web pages with a design system.