Tailwind CSS tips that save time

Tailwind CSS is fast when the class list stays short. It is slow to read when every exception sits on the same element.

Tips

1. Start with layout classes. Then add spacing. Then add color.
2. Extract a component when the same class string appears three times.
3. Use gap on the parent. Do not add margin on every child unless you must.
4. Use one breakpoint set. Prefer md: and lg:. Do not mix many scales in one view.
5. Merge classes with a helper such as twMerge when props add more classes.

Check

Open a component. If you cannot see the layout in the first line of classes, split the markup. The first line must show display, direction, and width.