re-tailwind-rn
Rescript bindings for rn-tailwind
Install
npm install tailwind-rn re-tailwind-rn
bsconfig.json
{
...
"bs-dependencies": ["reason-react-native", "reason-react", "re-tailwind-rn"]
}
Usage
Use the Tw
module
open ReactNative; [@react.component]let make = () => <SafeAreaView style={Tw.make("h-full")}> <View style={Tw.make("pt-12 items-center")}> <View style={Tw.make("bg-blue-200 px-3 py-1 rounded-full")}> <Text style={Tw.make("text-blue-800 font-semibold")}> "Hello Tailwind"->React.string </Text> </View> </View> </SafeAreaView>;
custom config
Usage withopen ReactNative; [@module "./styles.json"] external stylesConfig: Js.Json.t = "default" let tw = Tw.create(stylesConfig) [@react.component]let make = () => <SafeAreaView style={tw.make("h-full")}> <View style={tw.make("pt-12 items-center")}> <View style={tw.make("bg-blue-200 px-3 py-1 rounded-full")}> <Text style={tw.make("text-blue-800 font-semibold")}> "Hello Tailwind"->React.string </Text> </View> </View> </SafeAreaView>;
re-classnames
Recommended to use withopen ReactNative; module Tw = { include Tw; include Cn;} type styles = { container: Style.t, text: Style.t,}; let styles = { container: Tw.make("flex justify-start rounded-md px-2 py-2 my-2"), text: Tw.make("flex-grow text-gray-700 font-medium px-2"),}; [@react.component]let make = (~todo, ~completed) => { <View style={styles.container}> <Text style={Style.array([| styles.text, Tw.(make("line-through"->on(completed))), |])}> todo->React.string </Text> </View>;};
API
make
type make = string => ReactNative.Style.t;
color
type color = string => string;
create
type created = { [@as "tailwind"] make, [@as "getColor"] color,}; type create = Js.Json.t => created;