Tailwind css isn't working in react native

Question

<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

donny · Accepted Answer · 2024-09-23 01:56:16Z

0

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'],
};

answered Sep 23, 2024 at 1:56

donny

213 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Tailwind css isn't working in react native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related