Optimizing CSS

TL;DR

Avoid using custom tokens like h-[15px] or p-[3px]. Opt for Tailwind tokens such as h-8 and p-2 instead. Also, steer clear of specifying colors in your tokens (e.g., bg-[#fd429a]). Instead, use theme colors for better maintainability.

Introduction

This guide explores best practices for achieving optimal front-end performance with Tailwind CSS at Deco. We'll dive into the TailwindCSS generation process, examine how inline tokens impact Web Vitals metrics, and establish simple rules for maintaining a high-performance score.

Understanding Tailwind CSS Build Process

Deco's framework allows seamless integration of TailwindCSS tokens within any JSX component, applying styles without additional configuration. While this is convenient for begginers, understanding the underlying process is crucial for performance optimization.

Whenever changes are made to your website's code, the "Tailwind generation" process scans all .tsx files in your codebase. Subsequently, it extracts CSS tokens, merging them into a single styles.css file. This file is then served to the browser, styling your components. This process repeats whenever code changes occur.

However, the consequence is a larger-than-necessary styles.css file containing styles for all components, impacting performance metrics. Consider a scenario with a home page (Home.tsx) and a product page (Product.tsx):

// Home.tsx
export default function Home() {
  return <div class="flex justify-center p-2">Foo</div>;
}

// Product.tsx
export default function Product() {
  return <div class="flex justify-center p-4">Bar</div>;
}

By triggering the "Tailwind generation" process we get the following styles.css

.flex {
  display: flex
}

.justify-center {
  justify-content: center
}

.p-2 {
  padding: 8px
}

.p-4 {
  padding: 16px
}

Even though p-4 is not used in the home page, it's included in styles.css, increasing CSS payload and affecting Web Vitals metrics (FCP).

In the previous example, both flex and justify-center tokens are re-used. In big projects, this kind of class re-utilization tends to grow. Re-usability is key for having a performatic tailwind project. However inline tokens may break this trend. Examples of inline tokens include p-[3px], h-[4rem], and bg-[#fdb43a]. These classes are unlikely to be reused loading to an increased styles.css size and hindering Core Web Vitals.

To avoid inline syntax when replicating styles, follow a simple rule of thumb: use nearby tokens. For instance:

• p-[3px] -> p-2
• h-[4rem] -> p-8
• bg-[#fdb43a] -> bg-primary

This greatly increases re-usability and improves overall website performance

Real-world Example: 71% Reduction in CSS Payload

Applying these techniques to one of our projects resulted in a remarkable 71% reduction in the final CSS payload. This not only improved Web Vitals scores but also allowed for easy theming.

Conclusion

Tailwind CSS is a potent tool for styling JSX components. By comprehending the build process and optimizing your codebase, you can balance flexibility and efficiency. Advocate for the use of pure Tailwind tokens and theme tokens, fostering a more maintainable and performant application.

Happy coding with Tailwind CSS at Deco!