React Native (Expo Project)

Setup your project with Nativewind (v2)

Nativewind is a utility-first CSS framework for React Native. It is a port of Tailwind CSS for React Native. To setup your project with Nativewind, follow the instructions in the Nativewind documentation (opens in a new tab).

Install the package

Once you have configured your project with Nativewind, you can install the package by running one of the following command:

npm install expo-nativewind-components

Install Expo Image (if not already installed)

You will need to install expo-image as it is a required dependency for one of the components in the package. You can install it by running the following command:

npx expo install expo-image

Thats it 🎉

You are now ready to use all available components in your project. You can import any of the components from the package and use them in your project without any further configuration.

 
import { StyledWindView, StyledWindText } from "expo-nativewind-components";
 
export default function App() {
  return (
    <StyledWindView className="h-screen w-full justify-center items-center">
      <StyledWindText className="text-center text-2xl text-red-500">
        Hello, World!
      </StyledWindText>
    </StyledWindView>
  );
}