For a long time, we have worked with styled-components, as the de facto standard for css-in-js tools. However, during research on how to optimize long tasks, we figured out that styled-components are one of the major bottlenecks in our project. That’s why we switched to Tailwind - a tool growing in popularity, thanks to its utility-first approach and significantly better performance, helpful for developers aspiring to optimize their applications.

Why speed matters

Performance is crucial for the success of any online business. Websites that load quickly and respond promptly to user input are more effective in engaging and retaining users compared to slower-loading websites that feel sluggish. Slow-loading sites have a negative impact on revenue, while fast-loading sites have been shown to increase conversion rates and improve business outcomes.

Performance is not only important for business outcomes but also a fundamental aspect of providing good user experiences. When websites contain excessive code, it requires browsers to consume significant amounts of the user’s data plan for downloading. Mobile devices, in particular, have limited CPU power and memory. This can result in poor performance conditions and, considering human behavior, people can only tolerate suboptimal conditions on a website for a limited amount of time before deciding to abandon it.

What even is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that offers a different approach to styling compared to traditional methods like styled-components. It provides a wide range of pre-defined utility classes that developers can use to style their user interfaces.

For example:

- ****: This standard HTML tag defines a block of text, creating a paragraph
- class: Tailwind uses the standard class attribute to style elements
- mt-px: Adds a tiny top margin to an element, equivalent to 1 pixel. “mt” stands for “margin-top” and “px” signifies the margin size in CSS pixels
- px-2: Adds horizontal padding (left and right) of 2 units, typically 0.5rem or 8px if the root font size is 16px
- text-center: Aligns the text inside an element to the center
- text-lg: Sets the font size of the text inside a paragraph to a large size defined by Tailwind’s scale
- font-bold: Applies a bold font weight to the text
- text-sky-400: Applies a specific light shade of sky blue (400) to the text, as per Tailwind’s color palette which typically ranges from 50 to 900

This is the final output:

Instead of creating custom components or writing extensive CSS code, composing these utility classes together allows us to quickly build and style UI elements. This utility-first approach eliminates the need for writing repetitive CSS code and allows for rapid prototyping and iteration.

Tailwind CSS offers a comprehensive set of utility classes for various styling needs, including responsive design, spacing, typography, and more. These utility classes can be easily combined and customized to achieve the desired visual effects without the need for additional CSS.

By using Tailwind CSS, developers can streamline the styling process, reduce the maintenance overhead of custom components, and focus more on building functionality. The framework promotes a consistent and cohesive design system by providing predefined utility classes, ensuring a unified look and feel across the application.

So, why Tailwind?

We considered other options such as Griffel, Linaria, and Compiled. However, based on the parameters we established, Tailwind was the most suitable choice.

Some of the parameters we used to compare different options were:

Documentation quality
Performance & bundle sizes
Company backing the library
Size of the community
Framework agnostic or specific to React
Support for server-side rendering (SSR)
Support for theming
Support for Atomic CSS
Method of applying styles (classNames, styled components, CSS properties)

During our research, while auditing with Lighthouse, we discovered that using Tailwind can make certain components load approximately 26% faster. This improvement was significant enough to justify making the switch.