Migration from Tailwind

How to migrate a user interface from tailwind to uikit.

uikit is inspired by tailwind. Therefore, many properties are similar with minor syntactical difference. The major differences are sizing and defaults.


In contrast to tailwind, uikit's core units are pixels. Therefore, sizes such as p-3, which translates to padding: 0.75rem or padding: 16px would be expressed as padding={16} in uikit. The rule for sizes is to multiply the tailwind value times 4.

Other sizes such as border radii (e.g. rounded-md) must be converted by looking into the Tailwind Documentation. In this case rounded-md translates to borderRadius={6}.