NativeWind & v2.0.0

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

Issue Analytics

State:
Created a year ago
Reactions:44
Comments:23 (13 by maintainers)

Top GitHub Comments

19reactions

marklawlorcommented, Aug 10, 2022

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.

15reactions

marklawlorcommented, Jul 19, 2022

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 🎉

Top Results From Across the Web

nativewind - npm

Use Tailwindcss in your cross-platform React Native applications. Latest version: 2.0.11, last published: 3 months ago.

Overview - NativeWind

NativeWind uses Tailwind CSS as scripting language to create a universal styling system. Styled components can be shared between all React Native platforms, ......

How it works - NativeWind

When running on the web, NativeWind passes your styles as className props, allowing you to use CSS StyleSheets! NativeWind adds some plugins to...

Expo | NativeWind

2. Setup Tailwind CSS. Run npx tailwindcss init to create a tailwind.config.js file ... with Webpack 4 and instead, postcss-loader@4.2.0 should be used....

Divide Width - NativeWind

<View className="divide-x-2"> <Text>0</Text> <Text>1</Text> <Text>2</Text> </View> // It will output as this <View> <Text>0</Text>