How does this library compares to NativeWind ?

[younes0]

How does this library compares to NativeWind ? https://github.com/marklawlor/nativewind

[jaredh159]

I had never heard of it until you opened this discussion, so I can't really say other than by looking at their readme. Looks like a nice project. Seems to lean heavily towards a babel plugin / styled-components type mindset. Would be interested to hear from people who have used both libraries.

[AangPer]

I have tried at least three tailwind libraries for react native, the third one was this one and I am happy 🤩 using it, it works very well, with the other libraries I had problems passing arbitrary values as props, they were always buggy and when I needed to configure my tailwind.config.js file the changes were not reflected instantly I had to do a npx react-native start --reset-cache. js, another feature I'm happy with is the tw.color() method, it's great because I can reuse my style guide used in tailwind.config.js in components like icons that should only receive one color so I don't need to create a colors.js file with all my color scheme.

[marklawlor]

Hi @younes0, creator of NativeWind. The biggest difference between the two libraries are core implementation.

tailwind-react-native-classnames uses a custom Tailwind compiler that parses strings into RN objects at runtime.

nativewind uses the Tailwind compiler to parse strings into RN objects at build time.

Some advantages of a runtime compiler: twrnc can dynamically compile classes (eg text-${color}-500), while NW can only process static classes (eg condition ? 'text-red-500' : 'text-blue-500'). TRNC compiler is custom and can deviate from Tailwind (eg grow-123 #146) and can more easily create a RN-version of Tailwind.

Advantages of a build time compiler: Fast startup and component rendering (before-caching)

Both libraries cache styles, so repeated renders should be fairly similar.

For dynamic styles, twrnc uses a hook while NW uses an external store. In twrnc if the window resizes or color scheme changes the entire app will re-render, while NW will only render components that subscribed to those topics. This isn't super relevant for android/ios but is for web.

Talking about web, NW has the ability to style RN components with CSS on web, while twrnc can only use Stylesheet.create. This is relevant if you need responsive media queries during SSR.

I think both projects have a similar setup complexity, but TRNW is probably simpler to debug at runtime.

Features:

• Both have dark mode / responsive styles arbitrary styles.
• Both support tailwind.config.js themes/plugins/etc
• Both have platform variants
• Both have dynamic units (viewport units)
• Both work with editor plugins (twrnc requires some config)
• Both can customise the theme per platform/device

twrnc exclusive features

• https://github.com/jaredh159/tailwind-react-native-classnames/tree/65bdb50365a2b1a8a65063747dcad727373e3dfa#rn-only-additions
• TRNC has better control of theme customisation per platform/device.
• CLSX helper functions

NW exclusive features

• Pseudo classes (hover, active, focus)
• Child styles (supports divide / space)
• Parent state styling (group)

As you can see both libraries achieve mostly the same thing, just in a different manner. NW has better web support, faster startup and some flashy extra features, but those might not be a priority for you.

Also twrnc is much more mature and NativeWind is working on a stable release.

The best thing about choosing either library is that both:

-use Tailwind syntax

• use the same config
• work with inline styles / other style libraries

So it should be easy to migrate between either or try both at the same time!

Hope that helps 👍

[jaredh159]

@marklawlor really appreciate the detailed write up, and wish you all the best with NativeWind, sounds really promising. 👍

[younes0]

amazing, thank you both for making react native easier

[PeerRich]

great comparison, thank you!

[lucas-quinn]

Amazing comparation. Since both use Tailwind syntax. It would be very easy to migrate from each other. Don't need to worry too much about it.

[redbar0n]

@marklawlor @jaredh159

Thanks for a great and useful comparison between this library tailwind-react-native-classnames and nativewind.

How would they both compare to tailwind-rn (the currently most popular option)?

I see from the readme of this library tailwind-react-native-classnames that the first version of it was based on tailwind-rn.

The first version of this package (before it was re-written from scratch) was based on the excellent tailwind-rn.

But other than that, the differences, with their tradeoffs elude me...

There's so many Tailwind for React Native options that my head is spinning...

• tailwind-rn
• react-native-tailwind
• react-native-zephyr
• NativeWind aka. tailwindcss-react-native previously.
• tailwind-react-native-classnames (aka. twrnc)
• react-native-tailwindcss
• react-native-tailwind-classnames (not to be confused with the library with the issue you are currently reading)

Their relative popularity:

https://moiva.io/?npm=nativewind+react-native-tailwind+react-native-tailwind-classnames+react-native-tailwindcss+react-native-zephyr+tailwind-react-native-classnames+tailwind-rn+tailwindcss-react-native

Any knowledge on how to categorize and/or differentiate them would be greatly appreciated. Even if it would be shallow (since you probably don't have great insight into them), since your general domain knowledge here would go further than most.

[jaredh159]

i wrote this up for an issue a while back, see here. some of this might have changed, for all i know tailwind-rn may have added some features since i wrote this

#110

[pencilcheck]

Based on this benchmark, https://github.com/efstathiosntonas/react-native-style-libraries-benchmark

Seems like twrnc is the fastest among the tailwind inspired styling libraries

[jaredh159]

we try hard to keep twrnc really fast, but i don't know that i would put too much stock into that benchmark -- benchmarks are so difficult to get right.

[teddybee]

@marklawlor Can I use clsx, tailwind-merge and class-variance-authority libs with nativewind 4.x?

[marklawlor]

In the upcoming NativeWind v4 all those libraries are supported.

Technically they are supported now, but there's a couple of hoops to jump though.

[jtwigg]

@marklawlor Can you comment on the performance of NativeWind v4 compared to StyleSheets or twrnc

I've just run the benchmarks here: efstathiosntonas/react-native-style-libraries-benchmark#10 (comment)

and I'm still seeing a 2x performance NativeWind v4 vs twrnc

I'd chose NativeWind syntax and web support for sure, except a 2x performance loss at the outset is just something my organization can't stomach.

• Does this slowdown make sense to you? Even given that it should be mostly be done at compile time?
• Do you have performance benchmarks yourself you could reference?

[marklawlor]

NativeWInd v4 is not released and it hasn't been optimised yet.

NativeWind has a much larger feature set than twrnc such as:

• animations
• transitions
• CSS variables
• Media querys
• Container queries
• Viewport Units
• Polyfills for missing units (transform by %)
• etc

except a 2x performance loss at the outset is just something my organization can't stomach.

I don't know much about your product, but it appears your basing a decision on a micro-benchmark - which is normally a bad idea. For context in that benchmark NativeWind is beating StyledComponents and Emotion. If you look at the State Of RN 2023 survey (source), together these two libraries make up 77% of usage.

So yes the number of 2x bigger than twnc, but that doesn't make it bad. Its still faster than the most popular styling libraries.

Also, NativeWind beats every library in Web performance and supports Server Side Rendering 😄