Usage in React Native

Using tw-classed with React Native

While tw-classed is primarily designed for web development, it is also possible to use tw-classed with React Native to style your mobile applications. This documentation page will guide you through the process of setting up and using tw-classed with React Native.

Install dependencies

Before getting started, make sure you have the following dependencies installed:


  1. Import the necessary components and libraries in your React Native file:
import { Text as RNText } from "react-native";
import { styled } from "nativewind";
import { classed } from "@tw-classed/react";
  1. Create a styled component using nativewind:
const StyledText = styled(RNText);
  1. Export a classed component by combining the styled component with tw-classed:
export const Text = classed(StyledText, {
  variants: {
    color: {
      blue: "text-blue-500",
      green: "text-green-500",


You can now use the Text component the same way you would use it in a React web application

import { Text } from "./path/to/Text";
const App = () => {
  return <Text color="blue">Hello, tw-classed!</Text>;