Translations

Differences between Tailwind CSS and react-native-tailwindcss

Class conversions rules

Every ‘class’ becomes CamelCase instead of tailwindCSS default - separated.

Tailwind CSS	react-native-tailwindcss
border-t-1	t.borderT1

A - in the beginning of a ‘class’ becomes a _.

Tailwind CSS	react-native-tailwindcss
-mt-4	t._mT4

A directional attribute will become capitalized for consistency reasons.

Tailwind CSS	react-native-tailwindcss
inset-x-0	t.insetX0
border-y-1	t.borderY1
pb-2	t.pB2
mt-3	t.mT3

A / also becomes a _ to separate the numbers.

Tailwind CSS	react-native-tailwindcss
w-1/5	t.w1_5

These conversions happen also when adding new items to the config file.

Tailwind CSS	react-native-tailwindcss
px-7	t.pX7

Make sure to checkout the special cases if there is something acting different the expected.

If there is anything not working or working different then expected please create an issue.