Nativewind with React Native
What is Nativewind?
NativeWind uses Tailwind CSS as scripting language to create a universal style system for React Native. NativeWind components can be shared between platforms and will output their styles as CSS StyleSheet on web and StyleSheet.create for native.
It's goals are to to provide a consistent styling experience across all platforms, improve Developer UX and code maintainability.
NativeWind achieves this by pre-compiling your styles and uses a minimal runtime to selectively apply responsive styles.
Step 1: So let's see how we can install
Assuming you have already created react native community CLI
If not you can click here to create react native community CLI Project
You can visit this link over here to install nativewind
Step 2: Let's setup nativewind
Run npx tailwindcss init
to create a tailwind.config.js
file
Add the paths to all of your component files in your tailwind.config.js file.
// tailwind.config.js
module.exports = {
- content: [],
+ content: ["./App.{js,jsx,ts,tsx}", "./<custom-folder>/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
In my case the <custom-folder>
will get replaced by src
since that's my folder where I'll be writing my code.
Step 3: Add the Babel plugin
Modify your babel.config.js
, just add plugins below the presets property.
// babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
+ plugins: ["nativewind/babel"],
};
If you are using typescript you need to extend the React Native types via declaration merging. The simplest method to include the types is to create a new app.d.ts
file and add a triple-slash directive referencing the types.
/// <reference types="nativewind/types" />
That's it now you can start using nativewind css in your project.
Oh wait a second, some of you might encounter an issue where it will give red color swirly underline to classname, to solve that problem you can just rename the above file to my-app.d.ts
& that's it.
Enjoy!!!