Skip to main content

Migrating from tailwindcss-react-native

Previously this project was called tailwindcss-react-native. If you are migrating from this project these are the breaking changes

tailwind.config.js is required​

NativeWind aligns with TailwindCSS and requires you have a tailwind.config.js file with a content glob.

TailwindProvider has been removed​

tailwindcss-react-native used React context to push updates to components. Unfortunately this approach does not scale, as every styled component needed to revaluate when the context changed. NativeWind replaces the TailwindProvider and useContext with NativeWindStyleSheet and useSyncExternalStore, providing greater control over which components should re-render.

As such, you will need to remove TailwindProvider from your application.

Configuration is now performed by calling methods on NativeWindStyleSheet. Please see the

CSS is the default for web​

Nativewind defaults to CSS for web if using React Native Web >=0.18

You can control this setting via the NativeWindStyleSheet.setOutput({ web: 'native' })

useTailwind()​

useTailwind() has been removed.

spreadProps option on styled() has been removed​

For most cases the classProps option should work as people expect, but due to issues with CSS this option was removed.