I’m using Tailwind CSS in a project and I’m curious about the performance implications of using arbitrary values.
The project performance is critical, rather than achieving a pixel-perfect UI. So, consider these alternatives:
# Opt 1
<div class="px-11">
<!-- content -->
</div>
# Opt 2
<div class="px-[2.8125rem]">
<!-- content -->
</div>
I assume that both options are equal in terms of performance, but I haven’t found information to confirm this. Therefore, I’m curious to understand if my assumption is incorrect.
My questions are:
-
Which of these alternatives is better for performance and why?
-
Consider to use arbitrary values (like
px-[2.8125rem]) everywhere. Does it increase the size of the generated CSS file significantly compared to standard utility classes (likepx-11)?
I appreciate any insights or advice.
Thank you!
2
@DA2. answered it well in the comments. But since no one has posted an answer, I’ll summarize it here.
Answer
The performance of these two approaches is identical.
Tailwind generates all utility classes as stylesheets at build time. The first approach, px-11, generates the following utility class:
.px-11 {
padding-left: 2.75rem;
padding-right: 2.75rem;
}
The second approach, px-[2.8125rem], generates the following utility class:
.px-[2.8125rem] {
padding-left: 2.8125rem;
padding-right: 2.8125rem;
}
Both approaches generate an equal number of classes with the same attributes.
Reusing the same arbitrary value will not significantly increase the size of the package.
No matter how many times you use px-[2.8125rem], it will only generate one style class. This is not a feature of Tailwind, but a reuse mechanism inherent in style sheets.
But using different arbitrary values produces different classes
For example, if you use px-[2.1rem], px-[2.2rem], px-[2.3rem], Tailwind will generate a style class for each of them. However, the size of a class is not many bytes, so it still does not significantly increase the package size.
Suggestions
When you really need to use an arbitrary value, just do it.
Arbitrary values do not have any impact on performance, nor do they significantly affect package size. It is worth it if it results in a sizable visual effect.
If you need to reuse an arbitrary value everywhere, configure it as a theme value.
Theme values are more elegant than arbitrary values. It can provide higher readability and ease of maintenance.
//tailwind.config.js
export default {
theme: {
extend: {
padding: {
'11.25': '2.8125rem',
},
}
},
plugins: [],
}
You can then use px-11.25 to achieve the same effect.
Do not abuse arbitrary values.
The default utility classes should be prioritized at all times. Use arbitrary values only if you really have no choice.
One of the major benefits of Tailwind is that it reduces the range of values that can be chosen, making it easier to maintain consistency and maintainability by standardizing the values in your project. Having different arbitrary values everywhere can have a big impact on code readability.