Tailwind CSS: The New CSS framework every front-end developer
In the beginning, it may not be easy to go towards new things, but when we see its market and operational approach, some of us realize that it is not always good to be old, and sometimes you have to put everything aside and start from the beginning, this is the view that Telwind and has been highly successful in this field.
You read in this article.
- The general definition of the framework
- The difference between Tilwind and others
- Create your own instead of customizing
This article starts with TailwindCSS, a CSS framework that makes designing easy and fast. This framework offers a different concept from other well-known frameworks such as Bootstrap or Foundation.
The General definition of the framework
Many CSS frameworks facilitate and speed up the design process, and Bootstrap is perhaps the most famous, but let’s dig a little deeper and see what makes Tailwind stand out.
Tailwind differs from most popular frameworks with the motto of Utility-First CSS Framework, while other well-known frameworks like Bootstrap are component-based CSS frameworks.
The Difference between Tilwind and others
The difference between these two types of frameworks can be summed up. Take a quick look at the official documentation for Bootstrap and the official documentation for Tailwind. You will notice that Bootstrap focuses on web page components and provides them out of the box. To give. You will find ready-made designs for Buttons or even Form details in general. You will also find some features like alerts, navigation bars, etc.
So, Bootstrap or any component-based framework provides many web page components in a unified design style.
While frameworks like Tailwind don’t provide any out-of-the-box components, if you search the official documentation, you might find examples of how Buttons behave in a specific way. Still, there isn’t a particular class for Buttons that you can use.
Create your own instead of customizing.
You won’t find any out-of-the-box components in the framework. Still, the framework removes any default styles for details, so you’ll find the button with no background, border, or anything else, even those the browser adds.
Tailwind removes them and allows you to customize them to your liking.
Instead of the framework providing classes that give a particular shape to the component, it provides lessons. For example, you’ll find courses for Padding, others to change the background color, etc., but what’s the point? If so, why not use CSS directly instead of using Tailwind?
The reason is simply that Tailwind offers a great way to create your design system, as it prepares the web page to be free of any pre-design and provides you with a JavaScript file where You specify all framework settings, so classes are generated according to the locations you provide in this file. It allows you to create your design system using JavaScript dynamics.
For example, through JavaScript settings, you can specify the size of the screens, which changes the styles so that, for example, the design is responsive and compatible with different sizes. Automatically create padding classes for each page size; for example, you would make a class called (sm:p-1) and simultaneously create another type called (lg:p-1) because it takes the settings you set for it and generates the appropriate types accordingly.
This is a comparison between Bootstrap as an example of a component-based framework and Tailwind as an example of a Utility-First Framework. Of course, it should be considered that advantages and disadvantages are relative. What you see as an advantage may be regarded as a disadvantage by others. From my point of view, the comparison only helps you choose the most suitable framework.
Amazing output file size
The size of the final CSS file that will be produced is significant; in general, the smaller the size of the files on the site, the less time it takes to load or download them on the user’s device, and as a result, the site loads faster. Therefore, attention should be paid to this issue. A table on the Tailwind site and in the official Tailwind documentation shows a size comparison between Tailwind and the most popular CSS frameworks. The comparison is made on a standard copy of the file. A minify or minified copy (a document from which extra spaces and symbols have been removed to reduce the file size) and compressed copies using Gzip and Brotli algorithms; of course, since Tailwind can be customized and changed settings, The size of the output file depends on the settings used and can vary slightly.
Note that Tailwind’s file size by default is enormous compared to others, but since Tree-shaking is possible during the build, and on the other hand, it is easily configured and adjustable, you can increase the file size. Reduce the output in several ways; for example, the official documentation for Tailwind talks about the Firefox Send site. , this site uses Tailwind, and the size of the CSS file in it is 14.4 KB (uncompressed mini version), and with the Gzip compression algorithm, its size is only 5.2 KB.
There are several ways to reduce file size. The best and easiest way, used by the Firefox submission service, is to use the Purgecss package. This package will search your project files for any classes you use and remove each. Unused type from CSS file For example, if you have a CSS file containing 300 categories and have used only 50, the tool will remove 250 new courses.
To avoid making the article too long, I will not explain this tool in this article, but you can check their site and the official documentation of Tailwind.
Of course, if you don’t use the previous tool for some reason, there is another way to reduce the file size: to manipulate the Tailwind settings file; for example, the default file contains more than 90 different colors. And I don’t think you use all these colors in any scheme; 90 colors are used, and all of them are in the backgroundColor property, textColor property, and borderColor property, which means 90 classes are created for these three. Properties are equivalent to 270 types, and of course, we did not calculate the variants; there are 4-page sizes in the default settings, and the three properties we mentioned use “Variant Responsive” In this case, we can multiply the value. 270 with the number of breakpoints, so we have 1080 classes, and also the three properties that use hover and focus, so you’ll only have 2160 classes from those three properties, and we end up with:
The file size can be reduced by removing all colors not needed by the design.
If there are colors you use in the text color that you don’t use as the background, don’t define those colors with these two properties.
Remove any you don’t use; for example, if you don’t change border colors according to Breakpoints, then remove Responsive from the borderColor property.
Turn off any properties you don’t use; for example, if you don’t use the float property, turn it off as we did earlier in this article, which will remove many unused classes.
Remove any breakpoints you don’t need, and if you apply all of these steps, Tailwind’s file size will likely be much smaller than all of the other frameworks’ files.
Of course, these presented materials were called attractive to clarify the meaning and concept of Tree shaking; in fact, you can use Build Tools, which every day have more and more beautiful features at an incredible speed, such as Vite, which can perform all these steps. They will do it automatically.
You code according to the previous routine, and you will get an impressive output that will deliver you the work of several hours or even days in a few seconds or under a second. In a word, the Tailwind framework changed the frontend world and can guarantee the logic and strength of the frontend codes under your control.