Kakao Entertainment FE Team Shares Tips for Adopting Tailwind CSS

The FE Development Team at Kakao Entertainment shared practical tips to help new developers resolve issues encountered during the early stages of adopting Tailwind CSS. While Tailwind's utility-first nature boosts development speed, it can cause confusion regarding initial setup and class precedence.

Reducing Arbitrary Values

When design specifications are in px units, overusing arbitrary values like [14px] reduces readability. To address this, register px presets in theme.extend within tailwind.config.js to enable the use of abbreviated classes such as p-8 and text-12. Note that these must be registered separately for each property, such as spacing, fontSize, and minWidth.

Handling Preflight

Preflight resets browser default styles to prevent conflicts with the design system. It sets the default margin or font-size for h1–h6 to inherit or 0. If necessary, it can be disabled by setting preflight: false in tailwind.config.js.

Class Precedence and twin.macro

Tailwind determines precedence based on the order of the built CSS, not the source code order. Consequently, if bg-black and bg-white are applied to the same element, the final precedence may vary depending on the build result. Using twin.macro ensures that the class declared later in the className is ultimately applied. However, twin.macro is not yet fully supported in Tailwind v3 and is currently being updated.

Headwind Plugin

To prevent redundant entries and improve readability when configuring extensive CSS for a single element, the Headwind plugin can be used. It sorts classes by style category rather than alphabetically.