Guidance on using arbitrary values vs design system tokens in Tailwind #18748
-
|
I have been using TailwindCSS for about a year, and in my current project, we have a design system that provides tokens for spacing, colors, and other styles. However, I have noticed we are using arbitrary values like w-[32rem] quite a lot. I was wondering if this is considered good practice. If it could be an issue, what would be the recommended approach to handle such cases while maintaining consistency and following best practices? I would greatly appreciate any guidance or suggestions from the community. 🙏 |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
If you are using an arbitrary value in note than one file, it may be a good idea to extract it to a theme token. Ideally though, you'd want to reason what the value represents. I.e. if it is a width dictated from a design, then yes, a spacing/container variable would be best. Or is it a sum of smaller widths and paddings and margins? If so, I'd use CSS variables in one source of truth to avoid "magic" numbers. |
Beta Was this translation helpful? Give feedback.
-
|
Extracting arbitrary values to theme tokens sounds like a good plan. Thank you for your quick response. 🙏 |
Beta Was this translation helpful? Give feedback.
If you are using an arbitrary value in note than one file, it may be a good idea to extract it to a theme token.
Ideally though, you'd want to reason what the value represents. I.e. if it is a width dictated from a design, then yes, a spacing/container variable would be best.
Or is it a sum of smaller widths and paddings and margins? If so, I'd use CSS variables in one source of truth to avoid "magic" numbers.