CODEWITHSUNDEEP
reactjsreact-nativetailwind-css
Ashok Shrestha
Ashok Shrestha

Reputation: 11

Tailwind css isn't working in react native

<View className="flex-1 items-center justify-center bg-white">
  <Text className="text-3xl">Hello World!</Text>

tailwind css isn't working in react native . It shows in topleft corner of the screen in mobile

i tried installing all the required components like

npm install nativewind npm install tailwindcss --save-dev npx tailwindcss init npm update tailwindcss nativewind added tailwindcss config

content: ["./app//*.{js,jsx,ts,tsx}", "./components//*.{js,jsx,ts,tsx}"],

added plugins: ["nativewind/babel"] in bable file

Upvotes: 1

Views: 78

Answers (1)

donny
donny

Reputation: 21

Adding the Babel preset module:metro-react-native-babel-preset is essential for your React Native project. It allows Babel to transform your code correctly for the React Native environment, enabling support for JSX and modern JavaScript features.

Here’s how your Babel configuration should look:

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: ['nativewind/babel'],
};

Upvotes: 0

Related Questions