Learn about Production Ready TAILWIND CSS Setup in REACT NATIVE !

#reactnative #tailwindcss #tutorial

Learn about Production Ready TAILWIND CSS Setup in REACT NATIVE !

First you need to setup your react native project ,

Step 1

create the new React Native Project Using Expo
cmd :- npx create-expo-app@latest my-awesome-app
cmd :- cd my-awesome-app

Step 2

Reset your project
You can remove the boilerplate code and start fresh with a new project. Run the following command to reset your project:
cmd : npm run reset-project

Step 3

Install these all package for install Nativewind
cmd:npm install nativewind react-native-reanimated@~3.17.4 react-native-safe-area-context@5.4.0
npm install --dev tailwindcss@^3.4.17 prettier-plugin- tailwindcss@^0.5.11

Step 4

Setup the Tailwind CSS in project
Run npx tailwindcss init to create a tailwind.config.js file
**
/ @type {import('tailwindcss').Config} /
module.exports = {
// NOTE: Update this to include the paths to all files that contain Nativewind classes.
content: ["./App.tsx", "./components//.{js,jsx,ts,tsx}"],
presets: [require("nativewind/preset")],
theme: {
extend: {},
},
plugins: [],
}

Step 5

Add the globals.css file on app folder
globals.css

@tailwind base; @tailwind components; @tailwind utilities;

Step 6

Last Step
npx expo customize metro.config.js

Copy this and replace it
`const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname)

module.exports = withNativeWind(config, { input: './global.css' })`

If Using AS PRODUCTION READY

/** @type {import('tailwindcss').Config} */ module.exports = { // NOTE: Update this to include the paths to all files that contain Nativewind classes. content: ["./app/**/*.{js,jsx,ts,tsx}"], presets: [require("nativewind/preset")], theme: { extend: { colors:{ primary:'#030014', secondary:'#151320', light:{ 100:"#2a2640" } } }, }, plugins: [], }