Duc Mai

Full stack developer

2022-04-19

Tailwind for react native a good choice

Tailwind for react native a good choice

To style a mobile app developed with react native is somehow a little bit different from styling react web app. If you are new to react native development then you will find sometime very awkward to do styling like sharing styles... Luckily we have a neat utils which is similar tailwindcss for react native.

Styling in React Native

Styling in react native is somehow different for developers with background as web developer for me because styling in react native is object mindset while in web we usually interact with rules based. In my first I found that to share styles and update styles is a little bit awkward for me. Especially when I needed to create common styles then adapt that common styles on components.
Recently I found twrnc which is an expressive API for TailwindCSS + React Native, written in TypeScript and I am really happy about this finding. If you are familiar with Tailwind css then to start developing with twrnc for react native is super easy, no learning curve because the api is almost the same.

How to use twrnc

it is straightfoward to use twrnc
  • install via npm, npm i twrnc
  • import in components, import tw from "twrnc";
  • use in components

<View style={tw`flex flex-1 flex-col items-center justify-center`}>
              <Text style={tw``}>App is initializing...</Text>
            </View>

What I love about twrnc

  • Similar api as tailwind css.
  • Easy to style by rules as in web app.
  • Consistent and expressive rules. measurements and colors defined in tailwind are very useful and easy to combine when developing.

What does not work

so far I have discovered several small utils do not work in the same way as tailwindcss such as
  • border radius per edge
  • background opacity. You will need to specify using rgba explicit as react natives way.
ReactReactNative

About me

How I describe about myself

A developer cares about climate changes and environments

A full stack js developer

A developer is interested in cloud technologies

A challenge lover

Language:

English, Swedish, Vietnamese

Email:
mrducvmv88@gmail.com
LinkedIn:
Duc Mai
Twitter:
Duke Mai
IndieHackers:
Duc Mai