NativeWind & v2.0.0

[marklawlor]

This is mostly an issue for myself. to track my progress on v2.0.0.

v2.0.0 started as a small cleanup but has grown into a large refactor fixing many underlying issues. It will also be released under a new name NativeWind 🎉

The new (in progress) documentation can be found here: https://www.nativewind.dev

A migration guide can be found here: https://www.nativewind.dev/guides/tailwindcss-react-native

Features

• StyleSheetStore
• Rename component to group-scoped-start
• Refactor useTailwind()
• Platform functions
• PixelRatio functions
• Stylesheet functions
• Per platform theme
• Group
• vw/vh units
• Refactor topics into static output
• Refactor state bit masks into static output
• optimise pseudo classes
• optimise child styles classes

Testing

• Vanilla (native)
• Vanilla (web)
• Expo (native)
• Expo (web)
• NextJS (web)
• Platforms
• Light/dark
• Responsive classes
• Platform functions
• PixelRatio functions
• Stylesheet functions
• Per platform theme
• Group
• Group-scoped
• Parent
• Pseudo classes
• Child styles
• Units
• PixelRatio functions
• vw/vh units
• EAS build pipeline

Website

• Rebrand
• Remove TaiwindProvider from setup
• Rewrite setup as "native" and "web" sections
• Move frameworks to top level
• Add live example on introduction
• Add platform variants page
• Add responsive design page
• Add typescript page
• Add themes page
• Add light/dark mode page
• Rewrite useTailwind docs
• Rewrite TailwindProvider docs
• Rewrite useColorScheme docs
• Rewrite parent state styling page
• Rewrite preview features pages
• Algolia search

Repo

• Release announcement
• Rebrand readme
• Deprecate tailwindcss-react-native
• Rename repo
• Update Solito PR

Post 2.0

• RTL support
• group-scoped-end

[aboahab]

Responsive classes already supported?

[apetta]

Would be great if this package could play nicely with Typescript React Native setup

[marklawlor]

Responsive classes already supported?

@aboahab They are already supported but not documented, added to the list 👍

Would be great if this package could play nicely with Typescript React Native setup

https://tailwindcss-react-native.vercel.app/compilation/babel#typescript

@apetta Docs for this are a bit hidden, added to the list 👍

[vital-tech-results]

Congratulations! I feel lucky to find your package! I just searched on NPM and noticed your recent updates and immediately downloaded. Your docs are clear and helpful, too! ⚛️

[apetta]

Thanks @marklawlor, this package is really great. Would be nice to have a search feature in the new docs to fish out the hidden info like that (maybe fuse.js ?)

[marklawlor]

Good point. I should qualifiy for the open-source algolia account. I'll set that up once I switch domains 👍

[arryanggaputra]

Hi, thank you for this awesome package. I'm just curious, is the JIT feature has been enabled?

[marklawlor]

Hi, thank you for this awesome package. I'm just curious, is the JIT feature has been enabled?

@arryanggaputra This library has a peer dependency of Tailwind CSS 3+. Tailwind 3 is JIT only and removes the concept of pruning.

[p4bl1t0]

Hi, there! Are there be a migration guide from v1 to v2?

[marklawlor]

@p4bl1t0 I've updated the original post with a link to the preview docs

Migration guide is here https://tailwindcss-react-native-git-next-mwlawlor.vercel.app/guides/tailwindcss-react-native

For most people it should just be removing <TailwindProvider> from their app.

[batuhanbilginn]

Babel plugin name should be replaced with the new name in the docs. Took me 5 minutes to find out what's the problem :)
https://nativewind.vercel.app/quick-starts/expo#3-add-the-babel-plugin

[marklawlor]

I'm looking at releasing NativeWind sometime this week as a soft release. It's missing some minor features like the transform utilities, but I'll probably release them in a minor update.

In other news, the docs have moved to https://www.nativewind.dev/ and finally have a search feature 🎉

[the-dijkstra]

Hey there thanks for this great package any plans to support other Pseudo-classes (last,first,odd) ?

<View>
  {items.map( item => <Text key={item} className="mt-4 first:mt-0">{item}</Text> )}
</View>

[marklawlor]

I'll add support for them after 2.0, in the mean time your can write a cleaner version your example with the space utilities

<View className="space-y-4">
  {items.map( item => <Text key={item}>{item}</Text> )}
</View>

[the-dijkstra]

@marklawlor unfortunately my real case is a bit diffrent, I have a FlatList component, that I don't control it's styles. so i can't pass any styles to the parent. (although I'm fine with extra bit of margin at the bottom, I just wanted to share this here incase. )

Example

<FlatList
  data={DATA}
  renderItem={ item => <Text key={item}>{item}</Text>}
/>

With the previous code snippet, space-y-4 class was not doing the trick for me.

[p4bl1t0]

@mohammed-elhaouari in that cases you use styled() api:

https://www.nativewind.dev/api/styled

[the-dijkstra]

@mohammed-elhaouari in that cases you use styled() api:

https://www.nativewind.dev/api/styled

Thanks @p4bl1t0 I will try this and see if it works properly.

[p4bl1t0]

You're welcome. I used with react-native-elements and works like charm

[PeerRich]

super pumped to have found this project. we are huge fans of tailwind over at https://github.com/calcom/cal.com and we're looking to launch an open source mobile app next year, preferably in RN + tailwind.

@marklawlor do you think nativewind will be production ready by Q1 2023?

how does funding/interest/resources look like? We'd love to become a gold sponsor as soon as we start implementing and as we'd heavily rely on this package to work and get continuous support

[marklawlor]

@marklawlor unfortunately my real case is a bit diffrent, I have a FlatList component, that I don't control it's styles. so i can't pass any styles to the parent. (although I'm fine with extra bit of margin at the bottom, I just wanted to share this here incase. )

Example

<FlatList
  data={DATA}
  renderItem={ item => <Text key={item}>{item}</Text>}
/>

With the previous code snippet, space-y-4 class was not doing the trick for me.

The space-[n] utilities rely on the components children, but FlatList uses a render prop so the children based utilities will not work as expected.

I need to experiment a bit more with FlatList (and other renderProp based components) to find something that works without breaking compatibility between Native & Web.

[marklawlor]

super pumped to have found this project. we are huge fans of tailwind over at https://github.com/calcom/cal.com and we're looking to launch an open source mobile app next year, preferably in RN + tailwind.

@marklawlor do you think nativewind will be production ready by Q1 2023?

how does funding/interest/resources look like? We'd love to become a gold sponsor as soon as we start implementing and as we'd heavily rely on this package to work and get continuous support

Glad you like it 💯

I expect a production version "soon". NativeWind is rewrite of tailwindcss-react-native which was strongly influenced by me asking companies "what do you need to use this in production". I didn't expect the overwhelming level of support and feedback so it has taken a little bit longer than I expected 😆

The last thing holding up 2.0.0 is platform themes/scaling functions, which might include a breaking change. I'm just following up on another round of feedback before I commit to the API.

NativeWind currently only has me as a single contributor and I'm developing it for my own startup. Funding is minimal and just through Github sponsors. A still have a lot of plans for this library so I'll be working on it well into the future.

[marklawlor]

A new version of nativewind has been published which will hopefully be the last version before a release.

This version introduce an improved API for setting per device theme functions https://www.nativewind.dev/customization/theme#per-device-theme-values

I'm going to wait 1-2 weeks for any last bug reports before releasing the full version, during which I'll be focusing on improving the documentation & adding more examples.

[marklawlor]

v2.0.0 has been released 🎉 🎉 Thanks to everyone for their patience 👼

From this point onwards I'll be sticking to semver for future releases.