PickCodeNo, not in moderation. Tailwind documents arbitrary values like top-[117px] for one-off values that are not worth adding to your theme. They become a problem when the same value repeats across files, because then it is a hidden design token that nobody can change in one place.
When they are fine
- One-off layout values, such as a hero image offset or a fixed illustration width.
- Values from outside your system, like a third-party widget size.
- Calculations:
h-[calc(100vh-4rem)]. - Prototyping, before you know which values will stick.
When to promote one to the theme
If you write bg-[#4f46e5] or text-[15px] in three or more places, give it a name. In Tailwind v4 you add it with @theme in your CSS:
@import "tailwindcss";
@theme {
--color-brand: #4f46e5;
--text-body: 15px;
}Now bg-brand and text-body work everywhere, and changing the brand color is one edit. In v4 spacing utilities also accept any number on the scale, so p-13 works without brackets.
When copying from other sites
Code copied from a live site is full of values that are a pixel or two off the Tailwind scale. PickCode maps colors, spacing, radius and font sizes to the default scale when they match, so you get bg-emerald-400 rather than bg-[#34d399], and keeps an exact arbitrary value only when nothing matches. Review those leftovers and decide: snap to the scale, add a token, or keep them as one-offs.
Full walkthrough: CSS to Tailwind
Questions
Do arbitrary values hurt performance?
Not in a meaningful way. Tailwind generates a class for each unique value, so a few hundred one-offs add little CSS.
How do I find repeated arbitrary values?
Search your code for -[ and sort the matches. Values that repeat are candidates for your theme.
Can I ban them with a linter?
Some teams use a Tailwind lint rule to warn on arbitrary values. A warning that reviewers can override works better than a hard ban.