Organize Tailwind and UI variable

Recently, developing a new architecture has been fulfilling. We listed some best practices and tried to implement them in the project. One of them is “no magic numbers should exist in each UI component.” For example, a card has size variants, with the large version having a maximum width of 600px and the small version having a maximum width of 300px.

If you don’t think too much and write it in Tailwind, it might look like this: lg:max-w-[600px] max-w-[300px]. But having these magic numbers throughout the product can be quite a headache!!! Especially in situations where:

1. The design side lacks a good design system (design however you want)
2. The development side is strictly scrutinized for Pixel Perfect (treating RWD like AWD)

This can result in beautifully crafted poop 💩.

UI designers should also pay attention to the fact that every value in the design should have a basis behind it. If the product is not a one-time development, then establishing a design system is essential. Collaborating with the front end, if a lot of the early UI work is done well, the front end can also benefit (how to slice components, how to manage them, what interfaces to open, how to name them…).

Returning to the main topic, please define a name for each value. If that’s really not possible, define variables within the component instead of hardcoding values.

• Tailwind Anti-Patterns🔗