🥳
WindFrame is here: Design, prototype and code
sale icon End of Summer Sale 🎁 Get Contrast PRO UI library + admin template with 5 admin dahsboards, 23 pages and 10000+ components at 60% off 🎉
postImage

Why tailwind CSS is good

blogImage

By Emmanuel Chinonso

Technical Writer

Tailwind CSS is one of the latest technology making its way in the front-end world. As a front-end developer, my natural inclination was to try this technology when I first heard of it. I believe that every technology has its use case and its disadvantages. And so, it is essential as a developer to look at all technology you come across from both its negative and positive sides. Tailwind CSS is just a utility framework. It wasn’t created like the other existing CSS frameworks like Bootstrap and material UI with built-in UI components. Tailwind was built with the artist in mind. It was built to allow the creative part of the developer to come out.
The short version is that Tailwind was built to relieve developers from writing many CSS codes and instead work directly on your HTML file without leaving it. Today we are going to explore why Tailwind CSS is good.

Tailwind CSS Advantages

Tailwind CSS is good to use in place of plain CSS because it saves a lot of time and is easier to update your UI. I will be sharing some of the reasons I think tailwind CSS is good to use over traditional CSS.

Things not named

One of the things I find frustrating about writing custom CSS is having to name the classes. I will be wondering which classes should be specific? Which one should be more generic? Did I organize it well?
Tailwind makes all these easy by providing utility classes that can be used all the time. You may only have to name things, which rarely happens when you have to extract a component.

Built-in design

One of the reasons Tailwind is so good is its built-in design which the configuration files provide. Tailwind CSS configuration files give you a design template to work from.
In practice, the design looks better when they have consistent values for sizes, color, etc. Tailwind allows you to change these values upfront and make your designs or stick to the one Tailwind provides.

Customization

Why Tailwind is good is that it was built with customization in mind. Although it comes with its default configuration, you can easily override this with your project's tailwind.config.js file.

Everything from font size to colors to spacing can be customized to suit your needs. This erases having to fight the framework to give you the design you want or figure out which classes you need to override to get the results you want.

Easy component creation

Given that Tailwind CSS is a utility CSS framework, it is easy to create custom components from these utilities. I usually extract component classes for inputs and other elements by using the @apply directive. I also use the theme() function inside the CSS files to get values from the config file like fonts and colors instead of hard coding them myself.

Faster development

The overall advantage of why Tailwind is good is that it allows faster development of your project. This is because you don’t have to switch context or go battle with the framework to make all the changes you wish to use. Tailwind provides all the necessary tools you require to build your project without writing a custom CSS. Better Convenience A traditional approach to CSS makes it challenging to design your project because any changes you make on one page could affect another page. However, Tailwind solves this problem by only allowing the changes to affect the templates you are working on. This makes it easier to makes changes in one single page without it affecting other pages.

Conclusion

The advantages above are some of the reasons why Tailwind is good to use. You can start right away to use this technology by reading the docs if you find any of them interesting. If you are already a tailwind user, you can leave some of the advantages or disadvantages below. I will love to hear from you.

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...