Replaces a framework using CSS files?

21.07.2023

Today we would like to introduce you to one of our tools that we now use in many frontend projects. Tailwind CSS ranked according to surveys ( State of CSS ) rank 1 of the most popular frameworks. The well-known framework Bootstrap Although most of the long-term projects are in use, with a view to the general interest and satisfaction in the application, Tailwind is at the forefront. Bootstrap is anchored in many major projects and is a pain many not so easy to remove or update from a project. This would require a high amount of time that many are not willing to pay. Tailwind CSS, unlike many other frameworks, is a utility first framework. This means that it uses so-called utility classes that always have only one function. This function is expressed by its name. Below we look at Tailwind CSS more closely and look at some advantages that the framework brings.

How does Tailwind CSS even work?

If you use Tailwind CSS in your project, you usually only need a single CSS file. In this file preferences are imported by Tailwind CSS and further general adjustments can be made. The complete styling of the application is then implemented via the utility classes in the HTML code.

Let's look at what exactly this means. A button is a component needed in almost any project. The code keys show how the right button, including Hover effect, is designed once with the help of Tailwind CSS and once with Standard CSS. At a glance, you can see that using Tailwind CSS saves a lot of lines and thus time.

Standard CSS

<!-- HTML -->
<button class='button-primary'>
    Button
</button>

// CSS
.button-primary {
    background-color: var(--actidoo-blue-primary)
    padding: 0.5rem 1rem 0.5rem 1rem;
    color: white;
    transition: 0.5s all;
}

.buttom-primary:hover {
    background-color: var(--actidoo-blue-400)
}

With tailwind CSS

<!-- HTML -->
<button class='px-4 py-2 text-white bg-actidoo-blue-primary hover:bg-actidoo-blue-400 transition-all'>
    Button
</button>

The individual classes in the button tag define a CSS property with a specific value.

Smallest possible CSS file without unnecessary declarations

Only what really is used in the project

Tailwind CSS is highly performance-oriented, you always get the smallest possible CSS file in the application. When compiling the project, the framework generates a CSS file that contains only the CSS that is used in your project. The framework goes through the written code and generates a file that contains only the used utility classes. Netflix sets for example Top 10 website on Tailwind CSS. The entire website provides only about 6.5 KB CSS via the network. This greatly optimizes the performance of the page with respect to CSS. Facebook has also shown that the use of Tailwind CSS brings great performance optimizations. When redesigning the platform, it was completely set to Tailwind CSS. During the page call, 80% of data is saved. When using normal CSS files, the code becomes less and less readable over time due to unnecessary CSS blocks. Because if you write the code instead of using normal CSS files and corresponding classes, there will always be definitions that are no longer needed at some point. If, for example, a component is optimized and some lines of code are omitted in the HTML area and new ones come to it, then quickly forget, remove the corresponding CSS selectors as well. On the other hand, Tailwind CSS removes the CSS when removing the code in one train. The code remains clean.

Easy for all screens

Utility classes to expand breakpoints

It is easy to build a responsive, adaptive user interface using Tailwind CSS. Different breakpoints can be attached to each (actually any) utility class. From the breakpoint used, the utility class is then applied to the HTML element. There are five breakpoints in the default by Tailwind CSS, but this can be customized via the configuration. By default, Tailwind CSS uses the Mobile-First approach. That means all classes apply to the smallest screen. Adjustments are then installed for larger screens. In the following example you can easily see how much code you save and how easy it is to make responsive adjustments:

Standard CSS

<!-- HTML -->
<div class='content'>
  Inhalt mit Padding
</div>

<!-- CSS -->

.content {
  padding: 0.5rem
}

@media (min-width: 768px) {
  .content {
    padding: 1rem
  }
}

@media (min-width: 1024px) {
  .content {
    padding: 2rem
  }
}

With tailwind CSS

<!-- HTML mit Tailwind CSS -->
<div class='p-2 md:p-4 lg:p-8'>
  Inhalt mit Padding
</div>

Here a distance of 0.5rem to 2rem (8px to 32px) is inserted using the utility class "p" (p for Padding). The breakpoints md and lg increase the distance for the respective screen sizes.

Configuring your own design system

Uniform design throughout application

Your design specifications can be set within the project via a configuration file. This restricts the use of color selection, distances, typography, shadow and many other properties to the requirements of their design system. Each developer is forced to work on these limitations and no arbitrary values are created that can no longer be looked through. Thanks to some extensions for the IDEs, the established new classes are also proposed in autocompletion.

Example Color System

Immediate entry without CSS experience

CSS knowledge advantage

The framework is not directly suitable for developers without experience in the field of CSS. If you start without experience with Tailwind CSS you can learn how CSS works. One should be able to demonstrate solid knowledge, such as Media Queries, Flexbox and the Grid System to better use Tailwind CSS. In addition, one learns the names of the utility classes that are sometimes far away from the real CSS properties.

Composite

If you decide to design with Tailwind CSS in the project, the framework actually replaces the use of CSS files. As we have seen, this also brings some advantages. With proper application developers have the opportunity to achieve a very high degree of individualization to reach. Without extensive knowledge and experience in CSS, the application of Tailwind CSS in this But it's rather difficult. A strong and active community in the background ensures constantly new plugins and extensions for Tailwind CSS that Developers make work easier. This will make the application more and more effective, and in the end our customers will benefit again.

Benefits

Stable solution with few bugs and problems

Fast development process when used by experienced developers

No change between HTML and CSS Files

Disadvantages

High entry barriers for starters and only suitable for very experienced developers.

Seperations of Concerns and clarity of the code should be observed

Is Tailwind CSS also suitable for your application?

As a specialist in digitization, we are happy to assist you in evaluating the appropriate technologies for your application.

Nadine Krietenbrink

About the author

Nadine is a specialist in user experience design and front-end development. At actidoo, she deals with the creation of complex prototypes and the implementation of web applications. With her passion for qualitative UIs, she wants not only to give the end user a pleasure, but also to facilitate his use with intuitive operation.